React Router Transition
Painless transitions for React Router, powered by React Motion. Example site.
- v4-first
- backward-compatible with previous versions of
react-router
Installation
npm install --save react-router-transition react-router-dom
Example Usage
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; }Docs
Limitations
This library has some obvious limitations, the most marked of which are:
- no staggering or sequencing of animations
- no durations or timing functions
