React CSS Transition Group 中的超时值到底是做什么用的？

Question

我一直在阅读React Animations (React CSS Transition Group)的官方文档，但是我对timeout值的使用还有点不清楚 - 特别是当我在我的CSS中设置过渡效果时。这些值是延迟、动画持续时间还是在移除之前应用该类的时间？它们与我在CSS中设置的过渡持续时间有什么关系？

例如，如果我要在组件进入/离开时进行简单的淡入/淡出，我还会在我的CSS中设置opacity和transition duration。那么组件是否根据传递给该值的时间进行动画处理，还是基于我在CSS中设置的过渡持续时间？

以下是官方文档提供的示例： 我的React组件

<ReactCSSTransitionGroup 
  transitionName="example" 
  transitionEnterTimeout={500} 
  transitionLeaveTimeout={300}
>
  {items}
</ReactCSSTransitionGroup>

我的 .css 文件

.example-enter {
  opacity: 0.01;
}

.example-enter.example-enter-active {
  opacity: 1;
  transition: opacity 500ms ease-in;
}

.example-leave {
  opacity: 1;
}

.example-leave.example-leave-active {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}

谢谢！

- hidace

Answer 1

请查看我的答案：https://stackoverflow.com/a/37206517/3794660

假设你想要淡出一个元素。需要设置持续时间，因为React必须等待CSS动画完成后才能添加/删除类，并最终删除元素。否则，你将无法看到完整的动画，因为DOM元素会立即被移除。

https://github.com/facebook/react/blob/master/src/addons/transitions/ReactCSSTransitionGroupChild.js#L97

如果你看一下这段代码：https://github.com/facebook/react/blob/v15.3.2/src/addons/transitions/ReactCSSTransitionGroupChild.js#L95，你就可以看到React以前是如何尝试为你计算超时时间的。现在这已经被弃用了，你应该明确告诉React你的CSS动画持续时间（可能是因为猜测会有一些重大的开销/不一致性）。

- fabio.sussetto

---

我仍然不明白为什么需要它。React难道没有一个合成的onTransitionEnd事件来实现这个目的吗？ - bluenote10

Answer 2

从您链接的页面中：

引用：

您会注意到，动画持续时间需要在CSS和渲染方法中指定；这告诉React何时从元素中删除动画类，并且 - 如果它正在离开 - 何时从DOM中删除元素。

- narvoxx

---

我喜欢反对使用Transition而改用CSSTransition的事实（可能是为了不在.js文件中编写样式），同时强制复制一个可能随时间变化并且人们会忘记在两个地方更新的深度超时值。 - Cyril CHAPON