npm install react-easy-transition --save Easy transitions in react and react-router
For a simple fade-out fade-in effect on route change with react-router :
import EasyTransition from 'react-easy-transition' <EasyTransition path={location.pathname} initialStyle={{opacity: 0}} transition="opacity 0.3s ease-in" finalStyle={{opacity: 1}} > {this.props.children} </EasyTransition>Multiple transitions on different properties:
<EasyTransition path={location.pathname} initialStyle={{opacity: 0, color: 'red'}} transition="opacity 0.3s ease-in, color 0.5s ease-in" finalStyle={{opacity: 1, color: 'green'}} > {this.props.children} </EasyTransition>Optionally set a leaveStyle if it is different than the initialStyle:
<EasyTransition path={location.pathname} initialStyle={{opacity: 0, color: 'red'}} transition="opacity 0.3s ease-in, color 0.5s ease-in" finalStyle={{opacity: 1, color: 'green'}} leaveStyle={{opacity: 0, color: 'gray'}} > {this.props.children} </EasyTransition>You can set a custom component or classname if needed
<EasyTransition path={location.pathname} initialStyle={{opacity: 0, color: 'red'}} transition="opacity 0.3s ease-in, color 0.5s ease-in" finalStyle={{opacity: 1, color: 'green'}} component="MyCustomReactComponent" className="myCustomCSSClass" > {this.props.children} </EasyTransition>NOTE: If your <Link> component (or any children of this) contains styling/classes that use transition, make sure not to use transition: all as this will prevent react-easy-transition from fading out.
- Small : only 70 lines of code
- Lightweight : based on ReactTransitionGroup low level API
- Easy: works out of the box with React Router 2.0, no need to define CSS classes, use Javascript objects to define transition styles.
- Performance : still using native browser CSS transition under the hood
- Flexible : support for multiple transitions
- The fade-in effect when component mounts is rather straightforward to do with pure CSS transitions. However, the fade-out effect is impossible to do using only CSS because the component disappears immediately when unmounted.
- The new component appears before the end of the fade-out transition of the previous component, so both are shown at the same time, one on top of the other.
- Transition on initial render when rendering on the server
- Integration with react-router, redux, and server-side rendering in ./demo/