ReactJS -- Animation Wrapper Class

gistfile1.txt

let AnimationWrapper = React.createClass({
    render() {
        console.log(this.props.childClassName + ' render');

        return this.props.children;
    },

    componentWillAppear (callback) {
        console.log(this.props.childClassName + ' willappear');
        callback();

    },
    componentDidAppear () {
        console.log(this.props.childClassName + ' didappear');


    },
    componentWillEnter (callback) {
        console.log(this.props.childClassName + ' willenter');

        let el = this.getDOMNode();

        el.classList.add(this.props.prefix + '-enter');
        el.classList.add(this.props.prefix + '-enter-active');

        el.addEventListener('webkitAnimationEnd', () => {
            console.log(this.props.childClassName + ' willappear webkitAnimationEnd');
            callback();
        });
    },
    componentDidEnter() {
        console.log(this.props.childClassName + ' didenter');

        let el = this.getDOMNode();

        el.classList.remove(this.props.prefix + '-enter');
        el.classList.remove(this.props.prefix + '-enter-active');

    },
    componentWillLeave (callback) {

        console.log(this.props.childClassName + ' willleave');

        let el = this.getDOMNode();

        el.addEventListener('webkitAnimationEnd', () => {
            console.log(this.props.childClassName + ' transitionend');
            callback();
        }, false);

        el.classList.add(this.props.prefix + '-leave');
        el.classList.add(this.props.prefix + '-leave-active');
    },

    componentDidLeave() {
        console.log(this.props.childClassName + ' didleave');

        let el = this.getDOMNode();

        el.classList.remove(this.props.prefix + '-leave');
        el.classList.remove(this.props.prefix + '-leave-active');

    }
});


let App = React.createClass({
    contextTypes: {
        router: React.PropTypes.func
    },

    render() {
        var routeStack = this.context.router.getCurrentRoutes();
        var name = routeStack[routeStack.length - 1].name;

        return <TransitionGroup component="div">
                <AnimationWrapper key={name} prefix="page">
                    <RouteHandler />
                </AnimationWrapper>
            </TransitionGroup>
    }
});

let Routes = <Route name="app" handler={App} path="/">...more routes</Route>