リアクションアニメーション - コンポーネント間のスライド

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