Painless transitions for React Router, powered by React Motion. Example site.
- v4-first
- backward-compatible with previous versions of
react-router
npm install --save react-router-transition react-router-dom
import { BrowserRouter as Router, Route } from 'react-router-dom';
import { AnimatedSwitch } from 'react-router-transition';
export default () => (
<Router>
<AnimatedSwitch
atEnter={{ opacity: 0 }}
atLeave={{ opacity: 0 }}
atActive={{ opacity: 1 }}
className="switch-wrapper"
>
<Route exact path="/" component={Home} />
<Route path="/about/" component={About}/>
<Route path="/etc/" component={Etc}/>
</AnimatedSwitch>
</Router>
).switch-wrapper {
position: relative;
}
.switch-wrapper > div {
position: absolute;
}This library has some obvious limitations, the most marked of which are:
- no staggering or sequencing of animations
- no durations or timing functions
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent