正确使用ReactCSSTransitionGroup的方法？

Question

我正在尝试为页面实现简单的CSS淡入淡出，并且我不得不添加大量的超时道具以避免控制台Failed 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可能会过于复杂或不可靠，无法为您猜测持续时间（正如他们在最新版本中所实现的那样）。