使用ReactCSSTransitionGroup的正确方法？

Question

我想实现简单的CSS淡入页面，我不得不添加大量的超时道具，以避免控制台失败的PropType错误。它说了一些关于它在未来版本的React中不受支持的内容。

有什么想法？

<ReactCSSTransitionGroup 
    transitionName="pagefade" 
    transitionAppear={true} 
    transitionEnterTimeout={500} 
    transitionAppearTimeout={500} 
    transitionLeaveTimeout={500} 
> 

Answer 1

您应该提供这些超时支持，因为React需要它们来正确处理转换持续时间。

看到这里：https://github.com/facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroup.js#L29他们警告你，这些超时已成为必要，而他们之前是可选的。

我的理解是，没有可靠的方法来正确地同步DOM节点挂载/卸载与您在CSS中指定的转换持续时间。

例如，假设您希望元素在卸载之前淡出。你希望不透明度转换完全完成，然后React实际上为你删除DOM节点，否则动画将被剪切。所以你需要明确地反应你的动画的持续时间，因为对于React来说，尝试猜测持续时间可能太复杂或不可靠（就像他们在最新版本中实现的那样）。