zhuopeng / react-router-transition

painless transitions built for react-router, powered by react-motion

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

Example Usage

import { AnimatedSwitch } from 'react-router-transition';
import Route from 'react-router-dom/Route';

export default () => (
  <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>
)

.switch-wrapper {
  position: relative;
}

.switch-wrapper > div {
  position: absolute;
}

Docs

• AnimatedSwitch
• AnimatedRoute

Limitations

This library has some obvious limitations, the most marked of which are:

• no staggering or sequencing of animations
• no durations or timing functions