animation.scss

@keyframes fadeSlide {
    from {
        opacity: 0.01;
        transform: translateY(-.25em);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeSlideOut {
    to {
        opacity: 0.01;
        transform: translateY(.25em);
    }

    from {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-fade-in {
    // position: relative;
    animation: fade .5s ease-out backwards;
}

// Incoming view gets absolute position
.anim-view-in {
    animation: fadeSlide .2s ease-out .4s backwards;
    position: absolute;
    width: 100%;
    z-index: 2;
    top: 0;
}

.anim-view-out {
    animation: fadeSlideOut .3s ease-in backwards;
}

application.js

import React          from 'react';
import { Router }     from 'react-router';
import { history }    from 'react-router/lib/HashHistory';
import View           from './View';
import flux           from './flux';

// assumes you have some components like App.js and PageNotFound.js loaded.

const routes = {
    name: 'root',
    component: App,
    ignoreScrollBehavior: true,
    childRoutes: [
        {
            name: 'not-found',
            path: '*',
            component: PageNotFound
        }    
    ]
}


/**
 * Decorate route components with the flux instance
 *
 * Also decorates all subviews of the root component with a View component,
 * which will eventually hold lifecycle hooks for transitions/animations.
 *
 * @param  {object}     Component A react component
 * @param  {object}     props     Router props (route, routeParams, branch)
 * @return {function}             The view itself
 */
function createElement(Component, props) {
    var path      = props.route.path;
    var key       = path ? path.replace(/[\/\:\?]/g, '') : 'root';
    var component = <Component {...props} flux={flux} />

    if (props.route.name === 'root') {
        return component;
    }

    return (
        <View location={props.location} flux={flux} key={key}>
            {component}
        </View>
    );
}

const router = React.createElement(Router, {
    history:        history,
    createElement:  createElement,
    children:       routes
});

React.render(router, mount);

View.js

import React      from 'react';
import * as utils from '../utils';

var whichAnimationEvent = utils.whichAnimationEvent();

export default React.createClass({

    getNode() {
        return this.refs.node.getDOMNode();
    },

    componentWillAppear(callback) {
        var node = this.getNode();
        callback();
    },

    componentDidAppear() {
        var node = this.getNode();
    },

    componentWillEnter(callback) {
        var node = this.getNode();

        if (!whichAnimationEvent) {
            return callback();
        }

        node.addEventListener(whichAnimationEvent, function show() {
            node.removeEventListener(show);
            callback();
        });

        node.classList.add('anim-view-in');
    },

    componentDidEnter() {
        var node = this.getNode();
        node.classList.remove('anim-view-in');
    },

    componentWillLeave(callback) {
        var self = this;
        var node = this.getNode();

        if (!whichAnimationEvent) {
            return callback();
        }

        node.addEventListener(whichAnimationEvent, function hide() {
            node.removeEventListener(hide);
            callback();
        });

        node.classList.add('anim-view-out');
    },

    componentDidLeave() {
        var node = this.getNode();
        node.classList.remove('anim-view-out');

        if (this.props.location.navigationType === 'POP') {

        } else {
            window.scrollTo(0,0);
        }
    },

    render() {
        return (
            <div className='view' ref='node'>
                <div className='view-items'>
                    {this.props.children && React.cloneElement(this.props.children, {
                       account: this.props.account,
                       flux: this.props.flux
                    })}
                </div>
            </div>
        );
    }
});