React CSS Transition Group的超时值究竟是什么？

Question

我一直在阅读React Animations(React CSS Transition Group)的官方文档,但是我有点不清楚超时值的用途 - 尤其是当我在CSS中设置转换时.值是延迟,动画的持续时间,还是在删除之前应用该类的时间长度？它们如何与我在CSS中设置的转换持续时间相关？

例如,如果我在组件进入/离开时有一个简单的淡入/淡出,我还会在CSS中设置不透明度和过渡持续时间.然后根据此值中传递的时间或我的CSS中设置的持续时间对组件进行动画处理吗？

以下是官方文档提供的示例:

我的反应组件

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

Answer 2

从您链接的页面：

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