ReactCSSTransitionGroup 不留任何影响

Question

我正在尝试使用 ReactCSSTransitionGroup 为我的状态中的项目数组设置动画。 appear 和 enter class 可以正常工作，但 leave class 不会触发。我正在使用

删除我的减速器中的项目

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。是否有解决方法可以在删除时触发休假 class？

Answer 1

您更新了您的状态，但您没有使用它来呈现您的元素（或者至少不是来自您共享的代码）。

如果您希望 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>
    );
}

Answer 2

我遇到了同样的事情，并追踪到问题是我从页面中删除了 ReactCSSTransitionGroup 组件，而我本应该删除其中的所需元素，即

这个（有效）：

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

而不是这个（不起作用）：

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

ReactCSSTransitionGroup 不留任何影响

ReactCSSTransitionGroup leave no Effect

javascript

reactjs

css-transitions

reactcsstransitiongroup