Animation React CSS转换组中的超时值具体是什么？

我一直在阅读官方文档，但是我有点不清楚超时值的用途——特别是当我在CSS中设置转换时。这些值是动画的延迟、持续时间还是在移除之前应用该类的时间？它们与CSS中设置的转换持续时间有什么关系

例如，如果在组件进入/离开时进行简单的淡入/淡出，我还需要在CSS中设置不透明度和过渡持续时间。该组件是否根据传入该值的时间或CSS中设置的持续时间设置动画

以下是官方文件提供的一个示例：

我的反应组件

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

---

谢谢

从您链接的页面：

您会注意到，需要在CSS和渲染方法中指定动画持续时间；这将告诉React何时从元素中删除动画类，以及（如果它要离开的话）何时从DOM中删除元素

请看我的回答：

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

---

如果您在这里看一下这段代码：您可以看到如何使用React为您计算超时。现在这已经被弃用了，你应该明确地告诉React你的CSS动画的持续时间（大概是因为猜测有一些主要的开销/不一致性。

我喜欢不鼓励使用Transition，而是使用CSTransition（可能在.js中没有样式），同时强制复制一个可能随时间变化的模糊深度超时值，人们会忘记在这两个位置进行更新。我仍然不明白为什么需要它。React是否有一个合成事件用于此目的？

.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;
}