ReactCSSTransitionGroup似乎没有应用动画

Question

我正在处理我的第一个React应用程序，并试图在“页面”（我添加和删除的顶层组件）之间工作一个简单的淡入淡出过渡。我工作过什么，似乎是很简单的例子here

我的渲​​染方法是这样的：

render: function() { 
    var currentPage; 
    switch (this.state.currentPage) { 
     case pages.DASHBOARD: 
      currentPage = <Dashboard />; 
      break; 
     case pages.PROFILE: 
      currentPage = <Profile />; 
      break; 
    } 

    var currentPageDiv = <div key={currentPage}> {currentPage} </div>; 

    return (
     <div className = 'App'> 
      <Header /> 
      <ReactCSSTransitionGroup transitionName="pageChange"> 
       {currentPageDiv} 
      </ReactCSSTransitionGroup> 
      <Footer /> 
     </div> 
    ); 
}, 

和CSS是这样的：

.pageChange-enter { 
    opacity: 0.01; 
    transition: opacity .5s ease-in; 
} 

.pageChange-enter.pageChange-enter-active { 
    opacity: 1; 
} 

.pageChange-leave { 
    opacity: 1; 
    transition: opacity .5s ease-in; 
} 

.pageChange-leave.pageChange-leave-active { 
    opacity: 0.01; 
} 

当状态更新它应该转换到其他页面。但是，转换只是“弹出”了与添加TransitionGroup代码之前的方式相同（因此看起来TransitionGroup代码没有任何功能效果）。我在做什么noob错误？

Answer 1

将您的key更改为简单的字符串，而不是您当前拥有的React组件。例如：

var currentPageDiv = <div key={this.state.currentPage}> {currentPage} </div>;