我正在尝试使用ReactCSSTransitionGroup来淡化某些内容，等待它完全消失，然后淡入新内容。
我正在使用key道具，这是this related question的解决方案，因此内容将被换出并设置动画。但问题是，新内容被添加到DOM并从一开始就占用流量空间，而不是等到旧内容淡出。也就是说，我可以通过转换延迟来延迟淡入，但内容将淡入的差距从一开始就存在。由于CSS visibility:hidden仍然使用opacity使用transitionend为流中的元素添加空间，因此也无济于事。
我的问题：有没有办法只使用CSS来达到预期的效果？如果没有，我假设我的组件必须检测淡出过渡的结束，然后才添加新元素;检测和响应// 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;
}
事件的推荐React方法是什么？
到目前为止我的代码：
$lastItem = $this->YOURMODEL->getInsertID();
答案 0 :(得分：6)
似乎没有办法仅使用CSS来实现预期的结果。
由于ReactCSSTransitionGroup拦截了低级API动画生命周期方法，因此在使用它时无法检测到动画的结束。唯一剩下的途径是直接使用ReactTransitionGroup的低级API。
通过在调用生命周期方法时通知父容器的组件中包装子项，父项可以延迟向其子项添加新组件，直到通知离开子项的转换已完成为止。
我已根据MIT许可在GitHub / npm上发布了实现此目的的react-css-transition-replace component。
答案 1 :(得分：0)
我发布了一个组件fade-props，专门解决了这个问题。
在“渲染单个孩子”下，react docs说“这种方法在动画多个孩子或用另一个孩子替换单个孩子时不起作用”;所以你要做的就是使用可用的API会很棘手。