ReactCSSTransitionGroup не имеет эффекта

Question

Я пытаюсь оживить массив элементов из моего состояния с помощью ReactCSSTransitionGroup. Классы appear и enter работают нормально, но класс leave не запускается. Я удаляю элементы в моем редукторе с

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

и залейте его

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

Рендер функции:

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; 
} 

Я также использую 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> 
    ); 
}