18

我一直在阅读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;
}

谢谢！

4

2 回答 2

5

在这里查看我的答案：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 动画的持续时间（大概是因为猜测有一些主要的开销/不一致。

于 2016-10-21T20:46:36.280 回答
0

从您链接的页面：

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

于 2016-10-21T16:49:58.873 回答