ReactCSSTransitionGroup leaves no effect

Question

I am trying to animate an array of elements from my state using ReactCSSTransitionGroup. Classes appearand enterwork fine, but the class leavedoes not start. I delete items in my reducer with

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

and fill it

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

Render function:

 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 (for testing only):

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

I also use cssNext. Is there a workaround to run the leave class on deletion?

Answer 1

You are updating your state, but not using it to render your elements (or at least not from the code you shared).

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