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

Answer 2

从您关联的页面：

您会注意到需要在CSS和render方法中指定动画持续时间;这告诉React什么时候从元素中删除动画类 - 如果它要离开 - 什么时候从DOM中删除元素。

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

2 个答案: