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

class SceneNavigator extends Component{
    constructor(props) {
        super(props);
        var {state, data, url} = props.stateNavigator.stateContext;
        this.state = {scenes: {[url]: state.renderScene(data)}};
    }
    componentDidMount() {
        var {stateNavigator} = this.props;
        stateNavigator.onNavigate((oldState, state, data, asyncData) => {
            this.setState((prevState) => {
                var {url, crumbs} = stateNavigator.stateContext;
                var scenes = {[url]: state.renderScene(data, asyncData)};
                for(var i = 0; i < crumbs.length; i++) {
                    scenes[crumbs[i].url] = prevState.scenes[crumbs[i].url]; 
                }
                return {scenes};
            });
        });
    }
    render() {
        var {oldState, state, data, url, crumbs} = this.props.stateNavigator.stateContext;
        var {getUnmountedStyle, getMountStyle, getMountedStyle, getUnmountStyle, interpolateStyle} = this.props;
        var sceneContexts = crumbs.concat({state, data, url, mount: true});
        return <TransitionMotion willLeave={() => ({...getUnmountStyle(state, data), leave: 1})}
            styles={sceneContexts.map(({state, data, url, mount}) => ({
                key: url,
                data: {scene: this.state.scenes[url], state, data, mount},
                style: {...getUnmountedStyle(state, data), leave: 0}
            }))}>
            {interpolatedStyles =>
                <div>
                    {interpolatedStyles.map(({key, data: {scene, state, data, mount}, style: {leave,...style}}) => 
                        <Motion key={key} defaultStyle={getUnmountedStyle(state, data)}
                            style={(mount ? getMountStyle : getMountedStyle)(state, data)}>
                            {(interpolatingStyle) => 
                                <div style={interpolateStyle(leave ? style : interpolatingStyle)}>
                                    {scene}
                                </div>
                            }
                        </Motion>)}
                </div>}
        </TransitionMotion>;
    }
}

export default SceneNavigator;

@@ -1463,25 +1463,21 @@
  %7B...get
-Unm
+M
 ount
-ed
 Style(st
@@ -1812,16 +1812,33 @@
  style=%7B
+(leave ? style : 
 (mount ?
@@ -1883,16 +1883,17 @@
 e, data)
+)
 %7D%3E%0A     
@@ -2002,32 +2002,16 @@
 teStyle(
-leave ? style : 
 interpol

Put back to mount style in TransitionMotion