ReactCSSTransitionGroup問題 - 試圖獲得流暢的幻燈片進/出動畫

Question

我正在編寫一個問卷系統，希望能夠順利地進入和退出問題。

下面是我的組件的渲染方法，顯示其中的問題。

render() { 
    const { loadingQuestion, question, userId, actions } = this.props; 

    const q = this.renderQuestion(question, (...args) => actions.answerQuestion(userId, ...args), (...args) => actions.skipQuestion(userId, ...args)); 
    return (
     <ul className="questions"> 
      <ReactCSSTransitionGroup 
       transitionName="question" 
       transitionEnterTimeout={1000} 
       transitionLeaveTimeout={1000} 
      > 
       {q} 
      </ReactCSSTransitionGroup> 
     </ul> 
    ); 
} 

而且也是我用此刻的CSS實現垂直信號：

.question-enter { 
    transform: translateY(100%); 
} 
.question-enter.question-enter-active { 
    transform: translateY(0%); 
    transition: transform 1000ms ease-in-out; 
} 
.question-leave { 
    transform: translateY(0%); 
} 
.question-leave.question-leave-active { 
    transform: translateY(-100%); 
    transition: transform 1000ms ease-in-out; 
} 

下面是一個頁面的鏈接顯示了當前的行爲： http://price-it.co:8080/frame

有誰知道爲什麼這個CSS不會導致問題滑出，而只是導致它消失？

謝謝！

Answer 1

您的示例在我的瀏覽器中不可用（我得到了app.js:12Redux DevTools could not render. Did you forget to include DevTools.instrument() in your store enhancer chain before using createStore()?錯誤）。

但我可以說我有同樣的與CSSTransitionGroup經驗，所以我決定用<TransitionGroup>與Velocity代替 - 當然它是多一點點jQuery的風格，但它obviosely更好地工作，然後使用CSS動畫。