Таймаут для компонента unmount

Question

Хорошо, у меня есть идея о создании удобных и родных переходов страницы с помощью React. Я привел пример того, как страницы должны переходить между собой - you can check it here.

И затем я начал программировать его с помощью React. И я остановился.

Скажем, у меня есть компонент Сцена:

export default class Scene extends React.Component { 
    constructor(props) { 
    super(props) 

    this.state = { 
     beforeUnmount: false 
    } 
} 

    render() { 
    return (
     <div 
     className={ classNames({ "scene-container": true, "scene-unmount": this.state.beforeUnmount })} 
     style={{ backgroundColor: this.props.color}}> 

     <h1 style={{ marginTop: "25%", textAlign: "center" }}> Scene { this.props.id } </h1> 
     { this.props.children } 
     </div> 
    ) 
    } 
} 

и вид тестовую страницу, которая использует эту сцену (AnotherTestPage в основном то же самое):

export default class TestPage extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (
     <div> 
     <Helmet 
      title={`Scene ${this.props.params.id}`} 
      meta={[{name: 'description', content: 'Index page'}]} 
     /> 

     <Scene id={ this.props.params.id } color= {`#${this.props.params.color}`}> 
      <DefaultLink to="/" text="Go to Index" /> 
      <DefaultLink to="/another" text="Go to Another" /> 
     </Scene> 
     </div> 
    ) 
    } 
} 

и маршрутизатор

export function createRoutes(history, store) { 

    return (
    <Router> 
     <Route component={App}> 
     <Route path='/' component={IndexPage} /> 
     <Route path='/forms' component={Forms} /> 
     <Route path='/scenes/:id/:color' component={TestPage} /> 
     <Route path='/another' component={AnotherTestPage} /> 
     </Route> 
    </Router> 
) 
} 

Перед тем, как текущий вид размонтируется, должна быть оживленная анимация сцены, и в то же время ne xt просмотр должен затухать. И моя проблема в том, что я не знаю, как это сделать, как тайм-аут размонтирования представления. Будем очень благодарны, если кто-нибудь поможет мне!

Answer 1

Анимации в React сделаны с помощью React рекламы на: react-addons-css-transition-group

Там пример в React маршрутизатора, который выполняет то, что вы пытаетесь достичь (анимации между переходами страниц): https://github.com/ReactTraining/react-router/tree/master/examples/animations