React Router Transition

route-transition.js

import React from 'react';
import {TransitionMotion, spring} from 'react-motion';

const willEnter = children => ({children, opacity: spring(0), translate: spring(999)});
const willLeave = (key, {children}) => ({children, opacity: spring(0), translate: spring(-999)});
const getStyles = (children, pathname) => ({[pathname]: {children, opacity: spring(1), translate: spring(0)}});

export default function RouteTransition({children, pathname}) {
    return (
        <TransitionMotion
            styles={getStyles(children, pathname)}
            willEnter={willEnter}
            willLeave={willLeave}
        >
            {interpolated =>
                <div>
                    {Object.keys(interpolated).map(key =>
                        <div
                            key={`${key}-transition`}
                            style={{
                                height: '100%',
                                width: '100%',
                                position: 'absolute',
                                opacity: interpolated[key].opacity,
                                transform: `translateX(${interpolated[key].translate}px)`
                            }}
                        >
                            {interpolated[key].children}
                        </div>
                    )}
                </div>
            }
        </TransitionMotion>
    );
}

usage.js

<RouteTransition pathname={this.props.location.pathname} style={{visibility: 'hidden', width: '100%', height: '100%'}}>
   {this.props.children}
</RouteTransition>