ReactCSSTransitionGroup leave no Effect

Question

私の状態のアイテムの配列をReactCSSTransitionGroupでアニメーションしようとしています。 appearとenterのクラスは正常に動作しますが、leaveクラスはトリガーされません。

return (
<ReactCSSTransitionGroup transitionAppearTimeout={2000} transitionEnterTimeout={10000} 
         transitionLeaveTimeout={10000} transitionName={animation} transitionAppear={true}> 
    <Paper zDepth={2}> 

     <ReactImageFallback 
     src={ item.imagesrc } 
     fallbackImage={ item.imagesrc } 
     /> 
    </Paper> 
</ReactCSSTransitionGroup>) 

のCss（単なるテスト用）：

.enter { 
} 

.enter.enterActive { 
} 

.leave { 
    transform: translate(+100%,+50%) ; 
} 

.leave.leaveActive { 
    transition-timing-function: ease-in; 
} 

.appear { 
    opacity: 0; 
    transform: translate(-100%,-50%) ; 
} 

.appear.appearActive { 
    transition-duration: 5s ; 
    transition-timing-function: ease-out; 
} 

私は機能をレンダリング

state.deleteIn(['globalArray','array']) 

と私の減速の項目を削除し、

state.setIn(['globalArray', 'array'], action.newItems) 

でそれを埋めますよ

私はcssNextも使用しています。 削除時に終了クラスを取得する回避策はありますか？

Answer 1

状態を更新しますが、要素をレンダリングするためには使用しません（少なくとも共有したコードからではない）。

あなたのコンポーネントの状態に基づいて入力または放置時にPaperをアニメーション化したい場合は、たとえば、

render() { 
    let items = this.state.items.map(item => (
     <Paper zDepth={2} key={/* unique key or index here */}> 
      <ReactImageFallback 
       src={ item.imagesrc } 
       fallbackImage={ item.imagesrc } 
      /> 
     </Paper> 
    )); 
    return (
     <ReactCSSTransitionGroup /*transitionE... props here */> 
      {items} 
     </ReactCSSTransitionGroup> 
    ); 
}