ReactCSSTransitionGroup leave no Effect

Question

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?

ReactCSSTransitionGroup has nothing to do with Immutable or Redux. It should work seamlessly. Can you post your rendering code ? — yachaka, Apr 09 '16 at 00:21
Okay, but how can you trigger this leave effect if the whole component is based on the state? I don't get why the appear class is added and the leave class not. — Jonas Laux, Apr 11 '16 at 12:09

score 0 · Accepted Answer · answered Apr 14 '16 at 09:11

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

score 0 · Answer 2 · answered Oct 25 '18 at 20:36

I was experiencing the same thing and tracked the issue down to the fact that I was removing the ReactCSSTransitionGroup component from the page when I should have just been removing the desired element within it, ie

This (works):

render() {
  return (
    <div>
      <ReactCSSTransitionGroup /*...props...*/>
        {display && <ItemToRemoveFromPage />}
      </ReactCSSTransitionGroup>
    </div>
  );
}

Instead of this (does not work):

render() {
  return (
    <div>
      {display && (
        <ReactCSSTransitionGroup /*...props...*/>
          <ItemToRemoveFromPage />
        </ReactCSSTransitionGroup>
      )}
    </div>
  );
}

ReactCSSTransitionGroup leave no Effect

2 Answers2