ReactCSSTransitionGroup keine Wirkung

Question

Ich versuche, ein Array von Elementen aus meinem Zustand mit ReactCSSTransitionGroup zu animieren. Die appear und enter Klassen funktionieren gut, aber die leave Klasse wird nicht ausgelöst. Ich Entfernen der Artikel in meinem Minderer mit

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

und füllen es mit

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

Render-Funktion:

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 (nur zum Testen):

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

Ich benutze auch cssNext. Gibt es eine Problemumgehung, um die Leave-Klasse beim Löschen auszulösen?

Answer 1

Sie aktualisieren Ihren Status, aber Sie verwenden ihn nicht zum Rendern Ihrer Elemente (oder zumindest nicht aus dem Code, den Sie freigegeben haben).

Wenn Sie möchten, dass Ihre Paper bei Eingabe oder Verlassen basierend auf dem Status Ihrer Komponente animiert wird. Zum Beispiel:

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