React Animations - Слайд между компонентами

Question

У меня есть новое приложение ReactJS. Я пытаюсь анимировать между представлениями с помощью плагина ReactCSSTransitionGroup, но классы анимации не применяются, как ожидалось. Кажется, анимации не происходит. Я что-то упускаю?

React Animation Docs

import React, { Component } from 'react'; 
import ReactCSSTransitionGroup from 'react-addons-css-transition-group'; 
import { connect } from 'react-redux'; 

import { FORM_PAGE, QUOTE_PAGE } from '../Config/Pages' 
import Form from './Form'; 
import Quote from './Quote'; 

class App extends Component { 
    render() { 
    return (
     <ReactCSSTransitionGroup 
     transitionName="page" 
     transitionEnterTimeout={300} 
     transitionLeaveTimeout={300} 
     > 
     {this.renderPage()} 
     </ReactCSSTransitionGroup> 
    ) 
    } 

    renderPage() { 
    switch (this.props.currentPage) { 
     case QUOTE_PAGE: 
     return (<Quote />); 
     case FORM_PAGE: 
     return (<Form />); 
     default: 
     return (<Quote />) 
    } 
    } 
} 

function mapStateToProps(state) { 
    return { 
    currentPage: state.app.currentPage 
    }; 
} 

export default connect(mapStateToProps)(App); 

CSS

<style> 
     .page-enter { 
     transform: translate(100%); 
     } 
     .page-enter.page-enter-active { 
     transform: translate(0%); 
     transition: transform 1000ms ease-in-out; 
     } 
     .page-leave { 
     transform: translate(0%); 
     } 
     .page-leave.page-leave-active { 
     transform: translate(-100%); 
     transition: transform 1000ms ease-in-out; 
     } 
    </style> 

Answer 1

Проблема заключается в том, вы не устанавливать ключи на возвращенных компонентов. Например.

renderPage() { 
    switch (this.props.currentPage) { 
     case QUOTE_PAGE: 
     return (<Quote key={'quote'} />); 
     case FORM_PAGE: 
     return (<Form key={'form'} />); 
     default: 
     return (<Quote key={'quote'} />) 
    } 
    } 

Вот скрипка, показывающая упрощенную версию вашего кода. Нажмите кнопку, чтобы просмотреть анимацию. Удалите ключ из Page1 и Page2, чтобы сломать его.

http://jsbin.com/xoviholumi