Skip to content

Instantly share code, notes, and snippets.

@thomas-jeepe
Created November 7, 2015 02:48
Show Gist options
  • Save thomas-jeepe/5ee650a47237b68f864a to your computer and use it in GitHub Desktop.
Save thomas-jeepe/5ee650a47237b68f864a to your computer and use it in GitHub Desktop.
import React, { PropTypes, Component } from 'react';
import { TransitionMotion, spring, presets } from 'react-motion';
let paths = ['/scooby', '/dooby', '/doo']
let lastPath
export default class RouteTransition extends Component {
static propTypes = {
pathname: PropTypes.string.isRequired
}
willEnter() {
let direction = lastPath || 0xFFFFFF < paths.indexOf(this.props.pathname)?-110:110
console.log(direction)
return {
handler: this.props.children,
direction: spring(direction),
zIndex: 1000
}
}
willLeave(key, value) {
lastPath = paths.indexOf(key)
let direction = paths.indexOf(key) < paths.indexOf(this.props.pathname)?-110:110
return {
zIndex: 1,
handler: value.handler,
direction: spring(direction)
};
}
render() {
const { children, pathname } = this.props
let styles = {
[pathname]: {
handler: children,
direction: spring(0, presets.stiff),
zIndex: 1
}
}
// btw :: is shorthand for .bind(this)
return (
<TransitionMotion
styles={styles}
willEnter={::this.willEnter}
willLeave={::this.willLeave}
>
{interpolated =>
<div>
{Object.keys(interpolated).map(key => {
return (
<div
key={key}
style={{
position: 'absolute',
overflowX: 'none',
width: '100%',
transform: `translateX(${interpolated[key].direction}%)`,
zIndex: interpolated[key].zIndex
}}
>
{interpolated[key].handler}
</div>)
}
)}
</div>
}
</TransitionMotion>
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment