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

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不会产生任何影响

2 个答案: