如何在渲染时为 React 组件设置动画？答案

【问题标题】：How to animate a React component on render?如何在渲染时为 React 组件设置动画？
【发布时间】：2015-05-02 00:43:24
【问题描述】：

我正在尝试为包含从其他地方获取的数据的 React 组件设置动画。将它放在ReactCSSTransitionGroup 中效果很好。也就是说，直到我将组件的render() 方法更改为返回false，直到数据被提取（到prevent it from being rendered without data）。

现在，我猜组件会立即挂载，此时会添加动画类，但只会在之后渲染。这种想法正确吗？当render 返回实际组件时，如何让组件动画化？

【问题讨论】：

你能告诉我们你到目前为止写的代码吗？（这不能正常工作）
我正在做一个小提琴，但是当我似乎有线索时，它花了太多的精力。原来铅没有帮助，所以我会看看我能不能尽快做点什么。

标签： reactjs reactcsstransitiongroup

【解决方案1】：

每当向其props.children 添加和删除组件时，ReactCSSTransitionGroup 就会激活。由于您的组件是在您获取数据之前挂载的，因此在获取数据后不会发生任何事情（我认为即使组件的 render() 方法返回 false 也是如此。如果不正确，请在 cmets 中告诉我）

Here's a solution

在 react 类接收到数据之前，不要挂载组件（在解决方案中，它是一个 <div key="1"> 标签）。使用 parent 组件上的组件状态来跟踪异步请求的状态。

【讨论】：

感谢您的提琴。我看到这是如何正确制作动画的，但是数据的获取与子组件相关，而不是与父组件相关。事实上，不同的孩子以不同的方式这样做。也感觉孩子们应该自己决定是否应该渲染它们 - 否则，元素的行为取决于它所在的组件。因此，我宁愿让组件在渲染时而不是在安装时进行动画处理，然后在安装组件时进行更改。
不幸的是，我真的想不出办法来做到这一点，因为 ReactCSSTransitionGroup 的生命周期是在将组件添加到其子组件时触发的。如果组件已经存在，您将无法重新触发动画而不取消安装和重新安装组件。父母决定是否应该渲染它的孩子对我来说并不自然，因为父母实际上决定是否在其render() 方法中返回孩子。您是否有理由希望孩子的 render() 的结果导致动画？
嗯，真可惜.. 孩子负责获取它的数据，并且必须将结果暴露给它的父母才能做出决定。在掌握 React 之前，我一直在尝试实施 Flux，但也许是我开始实施的时候了——那么也许你的答案更有意义。如果有的话我会告诉它的:)
我建议使用父级获取数据，一旦收到数据，就创建子级。另一种选择是让每个子级返回一个空的<ReactCSSTransitionGroup> 标签，当子级获取其数据时，您开始返回ReactCSSTransitionGroup，子级嵌套在其中。
我现在已经在 Reflux 操作中实现了数据获取，将其保存在 Reflux 存储中并从父级触发 - 正如您所建议的那样。当数据可用时，然后添加孩子并且确实很好地动画化。感谢您的帮助！

【解决方案2】：

ReactCSSTransitionGroup 不能很好地处理表格，因为它的默认行为是使用 span 元素包装标签。你可以为它提供你自己的组件，但我发现这个解决方案相当繁重和复杂。

我有一个different approach，它允许 React 组件在每次其内容更改时进行动画处理。通过在 2 个重复的 CSS 样式之间切换来不断触发动画。

【讨论】：

【解决方案3】：

除了 ReactCSSTransitionGroup，另一种方法是编写自己的 css 转换，并在 componentdidmount 中添加到组件中的 'enter' 类。请记住，您应该更改 requestAnimationFrame 中的状态，否则您的类将被添加到与挂载相同的事件循环中，因此不会动画。这是一个例子： https://codesandbox.io/s/zkm5015y1x

另外，关于事件循环的更多信息，Jake Archibald 的演讲： https://www.youtube.com/watch?v=cCOL7MC4Pl0

【讨论】：