javascript - Reactjs 动画替换 : How to wait for fade out before adding content to fade in?

Question

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

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

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

到目前为止我的代码:

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

Answer 1

似乎仅使用 CSS 无法实现预期的结果。

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

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

我已经发布了 react-css-transition-replace component ，在 MIT 许可下在 GitHub/npm 上实现了这一点。