Skip to content

Instantly share code, notes, and snippets.

@tannerlinsley
Forked from maisano/RouteTransition.jsx
Last active April 12, 2019 18:55
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save tannerlinsley/b8bf1e54515a11e5758ec36c8e4c5b59 to your computer and use it in GitHub Desktop.
Save tannerlinsley/b8bf1e54515a11e5758ec36c8e4c5b59 to your computer and use it in GitHub Desktop.
Using react-move with react-router
import React, { PropTypes } from 'react'
import { Transition } from 'react-move'
const RouteTransition = React.createClass({
propTypes: {
pathname: PropTypes.string.isRequired
},
render() {
return (
<Transition
data={React.Children.toArray(children)}
getKey={(d, i) => d.key || i}
update={d => ({
opacity: 1,
scale: 1
})}
enter={d => ({
opacity: 0,
scale: 0.95
})}
leave={d => ({
opacity: 0,
scale: 0.95
})}
>
{items => (
<div>
{items.map(item =>
<div
key={item.key}
style={{
position: 'absolute',
opacity: item.state.opacity,
transform: `scale(${item.state.scale})`
}}
>
{item.data}
</div>
)}
</div>
)}
</Transition>
)
}
})
module.exports = RouteTransition
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment