javascript - ReactCSSTransitionGroup 不留任何效果

Question

我正在尝试使用ReactCSSTransitionGroup为我的状态中的一组项目设置动画。appearand类enter工作正常，但leave类不会触发。我正在删除减速器中的项目

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

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