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

Question

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

例如，如果我要在组件进入/离开时进行简单的淡入/淡出，我还会在 CSS 中设置不透明度和过渡持续时间。然后组件是否根据传入此值的时间或 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;
}

谢谢!

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 动画的持续时间(大概是因为猜测有一些主要的开销/不一致。