javascriptreactjscss-transitionsreactcsstransitiongroup

ReactCSSTransitionGroup leave no Effect


I'm trying to animate an array of items from my state with ReactCSSTransitionGroup. The appear and enter classes work fine, but the leave class won't trigger. I'm removing the Items in my reducer with

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

and fill it with

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

.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'm also using cssNext. Is there a workaround to get the leave class triggered on delete?


Solution

  • You update your state but you don't use it to render your elements (or at least not from the code you shared).

    If you want your Paper to be animated on enter or leave based on your component's state. For instance :

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