ReactCSSTransitionGroup不产生任何影响

ReactCSSTransitionGroup leave no Effect

本文关键字：任何 影响 ReactCSSTransitionGroup      更新时间：2024-03-24

我正试图用ReactCSSTransitionGroup从我的状态中动画化一组项。appear和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。是否有一种变通方法可以在删除时触发休假类？

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

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

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

这个（工作）：

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

相反（不起作用）：

render() {
  return (
    <div>
      {display && (
        <ReactCSSTransitionGroup /*...props...*/>
          <ItemToRemoveFromPage />
        </ReactCSSTransitionGroup>
      )}
    </div>
  );
}
相关文章：