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

Question

我试图ReactCSSTransitionGroup通过淡出一些内容来替换内容,等待它完全消失,然后淡入新内容.

我正在使用key道具,这是相关问题的解决方案,所以内容被换出并动画.但问题是,新内容会添加到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;
}

Answer 1

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

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

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

我已经在GitHub/MIT许可下发布了实现此功能的react-css-transition-replace组件npm.