Reactjs动画替换：如何在添加内容淡入之前等待淡出？

Posted 2023-03-06

【中文标题】Reactjs动画替换：如何在添加内容淡入之前等待淡出？

【英文标题】：Reactjs animate replace: How to wait for fade out before adding content to fade in?

【发布时间】：2015-10-25 06:24:51

【问题描述】：

我正在尝试使用ReactCSSTransitionGroup 通过淡出一些内容来替换内容，等待它完全消失，然后淡入新内容。

我正在使用 key 道具，它是 this related question 的解决方案，因此内容正在被换出和动画。但是，问题在于新内容被添加到 DOM 并从一开始就占用了流中的空间，而不是等到旧内容淡出。即，我可以通过过渡延迟来延迟淡入，但内容淡入的间隙从一开始就存在。由于 CSS visibility:hidden 仍然为流中的元素添加空间，使用 opacity 也无济于事。

我的问题：有没有办法只使用 CSS 来达到预期的结果？如果不是，我认为我的组件将不得不检测淡出过渡的结束，然后才添加新元素；检测和响应transitionend 事件的推荐 React 方法是什么？

到目前为止我的代码：

// jsx

let key = this.state.adding ? 'addForm' : 'addPlaceholder';

<ReactCSSTransitionGroup transitionName="fade">
  <div key=key>
    this.state.adding ? this.renderForm() : this.renderPlaceholder()
  </div>
</ReactCSSTransitionGroup>


// css

.fade-enter 
  overflow: hidden;
  opacity: 0.01;

.fade-enter.fade-enter-active 
  opacity: 1;
  transition: opacity .3s ease-in .3s;


.fade-leave 
  opacity: 1;

.fade-leave.fade-leave-active 
  opacity: 0.01;
  transition: opacity .3s ease-in;

【问题讨论】：

您知道Low-level API吗？我认为这可能是可以使用的东西。

@TahirAhmed 据我所知，低级 API 会触发添加/删除子级的回调，但不会通知父级。由于相同的逻辑可能会在不同的孩子中重复，如果事实证明可能的话，我更愿意将其保留在父母中。否则，为各种子组件使用单个淡入淡出包装器可能是一种选择。

但是我想你可以通过props将一些父级的内部函数传递给子级，这样我认为子级可以调用父级方法来通知它完成了？

@TahirAhmed 据我所知，componentWillEnter 等动画生命周期方法应该是类方法，而不是 props 上的方法。这意味着我仍然需要一个具有动画意识的子节点，这些子节点具有这些生命周期方法，它们调用在props 上传递的父方法。它当然可以通过围绕所有孩子的淡入淡出包装组件来完成。但是，如果可以在不包装孩子的情况下处理这将是一个奖励。

我不太确定。你有可能想出一个简单的jsFiddle吗？您可以使用getting started 页面中的一个。

【参考方案1】：

似乎没有办法仅使用 CSS 来实现预期的结果。

由于ReactCSSTransitionGroup 拦截了低级 API 动画生命周期方法，因此在使用动画时无法检测到动画的结束。唯一剩下的途径是直接使用ReactTransitionGroup 的低级API。

通过将子组件包装在一个组件中，该组件在调用生命周期方法时通知父容器，父容器可以延迟向其子容器添加新组件，直到通知离开子容器的转换已完成。

我在 GitHub/npm 上根据 MIT 许可发布了实现此功能的 react-css-transition-replace component。

【参考方案2】：

我已经发布了一个组件，fade-props，专门解决了这个问题。

在“渲染单个孩子”下，react docs 说“这种方法在为多个孩子制作动画或用另一个孩子替换单个孩子时不起作用”；所以你想要做的事情对于可用的 API 来说会很棘手。