React动画 - 组件间滑动

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