-
-
Save j16h/b8f6099f44af5c8b5767e47dce0b6f3b to your computer and use it in GitHub Desktop.
Using react-motion with react-router
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React, { PropTypes } from 'react'; | |
| import { TransitionMotion, spring } from 'react-motion'; | |
| /** | |
| * One example of using react-motion (0.3.0) within react-router (v1.0.0-rc3). | |
| * | |
| * Usage is simple, and really only requires two things–both of which are | |
| * injected into your app via react-router–pathname and children: | |
| * | |
| * <RouteTransition pathname={this.props.pathname}> | |
| * {this.props.children} | |
| * </RouteTransition> | |
| */ | |
| const RouteTransition = React.createClass({ | |
| propTypes: { | |
| pathname: PropTypes.string.isRequired | |
| }, | |
| willEnter() { | |
| return { | |
| handler: this.props.children, | |
| opacity: spring(0), | |
| scale: spring(0.95) | |
| }; | |
| }, | |
| willLeave(key, value) { | |
| return { | |
| handler: value.handler, | |
| opacity: spring(0), | |
| scale: spring(0.95) | |
| }; | |
| }, | |
| getStyles() { | |
| const { children, pathname } = this.props; | |
| return { | |
| [pathname]: { | |
| handler: children, | |
| opacity: spring(1), | |
| scale: spring(1) | |
| } | |
| }; | |
| }, | |
| render() { | |
| return ( | |
| <TransitionMotion | |
| styles={this.getStyles()} | |
| willEnter={this.willEnter} | |
| willLeave={this.willLeave} | |
| > | |
| {interpolated => | |
| <div> | |
| {Object.keys(interpolated).map(key => | |
| <div | |
| key={`${key}-transition`} | |
| style={{ | |
| position: 'absolute', | |
| opacity: interpolated[key].opacity, | |
| transform: `scale(${interpolated[key].scale})` | |
| }} | |
| > | |
| {interpolated[key].handler} | |
| </div> | |
| )} | |
| </div> | |
| } | |
| </TransitionMotion> | |
| ); | |
| } | |
| }); | |
| module.exports = RouteTransition; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment