ReactCSSTransitionGroup离开没有效果

Question

我正在尝试使用ReactCSSTransitionGroup对我的状态中的数组项进行动画处理。 appear和enter类正常工作，但leave类不会触发。 我在reducer中使用以下代码来移除Items：

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。 有没有办法在删除时触发leave类？

- Jonas Laux

---

ReactCSSTransitionGroup与Immutable或Redux无关，应该可以无缝运行。您能发布您的渲染代码吗？ - yachaka

你使用的是哪种 CSS？ - Aaron Franco

好的，但是如果整个组件都基于状态，你如何触发这个离开效果呢？我不明白为什么添加了appear类而没有添加leave类。 - Jonas Laux

Answer 1

我也遇到了同样的问题，并且发现问题的原因在于我从页面中删除了ReactCSSTransitionGroup组件，而实际上我只需要删除其中的特定元素即可。例如：

这样做是正确的：

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

不要使用以下代码（无效）：

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

- learykara

Answer 2

你更新了状态，但是你没有使用它来渲染你的元素（或者至少不是从你分享的代码中）。

如果你想让你的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>
    );
}

- SebT