如何在渲染上为React组件设置动画？

Question

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

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

Answer 1

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

Here's a solution

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

Answer 2

ReactCSSTransitionGroup不能很好地与表匹配，因为它的默认行为是用＆lt; span＆gt;换行标记。标签。你可以提供自己的组件，但我发现解决方案非常繁重和复杂。

我有一种不同的方法，您可以找到here，它允许React组件在每次内容更改时设置动画。通过在2个重复的CSS样式之间切换来不断触发动画。

Answer 3

除了ReactCSSTransitionGroup之外，另一种方法是使用添加到componentdidmount中的组件的'enter'类编写自己的CSS过渡。请记住，您应该在requestAnimationFrame中更改状态，因为否则，您的类将在安装时添加到同一事件循环中，因此不会进行动画处理。这是一个例子： https://codesandbox.io/s/zkm5015y1x

此外，有关事件循环的更多信息，杰克·阿奇博尔德（Jake Archibald）的演讲： https://www.youtube.com/watch?v=cCOL7MC4Pl0