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 не имеет никакого функционального эффекта). Какую ошибку я совершу?

Answer 1

Измените свой key на простую строку вместо компонента React, который у вас есть. Например:

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