如何在渲染时为 React 组件设置动画？
How to animate a React component on render?
我正在尝试为包含从其他地方获取的数据的 React 组件制作动画。将它放在 ReactCSSTransitionGroup 中效果很好。也就是说，直到我将组件的 render() 方法更改为 return false 直到数据被获取（到 prevent it from being rendered without data）。
现在，我想组件会立即安装，此时会添加动画 类，但只会在之后渲染。这种想法对吗？当 render return 是实际组件时，如何让组件动画化？
ReactCSSTransitionGroup 在其 props.children 中添加和删除组件时激活。由于您的组件在获取数据之前已安装，因此在获取数据后不会发生任何事情（我认为即使组件的 render() 方法 returns false 也是如此。如果不正确，请在评论中告诉我)
只是不要挂载组件（在解决方案中，它是一个 <div key="1"> 标签）直到反应 class 收到数据。在 parent 组件上使用组件状态来跟踪异步请求的状态。
ReactCSSTransitionGroup 不能很好地处理表格，因为它的默认行为是用 span 元素包装标签。你可以用你自己的组件来提供它，但我发现解决方案非常繁重和复杂。
我有一个 different approach 允许 React 组件在每次内容更改时进行动画处理。通过在 2 个重复 CSS 样式之间切换不断触发动画。
除了 ReactCSSTransitionGroup，另一种方法是编写您自己的 css 转换，并在 componentdidmount 中添加到组件的 'enter' class。请记住，您应该更改 requestAnimationFrame 中的状态，否则您的 class 将在安装时添加到同一事件循环中，因此不会设置动画。这是一个例子：
https://codesandbox.io/s/zkm5015y1x
另外，关于事件循环的更多信息，Jake Archibald 的演讲：
https://www.youtube.com/watch?v=cCOL7MC4Pl0
我正在尝试为包含从其他地方获取的数据的 React 组件制作动画。将它放在 ReactCSSTransitionGroup 中效果很好。也就是说，直到我将组件的 render() 方法更改为 return false 直到数据被获取（到 prevent it from being rendered without data）。
现在，我想组件会立即安装，此时会添加动画 类，但只会在之后渲染。这种想法对吗？当 render return 是实际组件时，如何让组件动画化？
ReactCSSTransitionGroup 在其 props.children 中添加和删除组件时激活。由于您的组件在获取数据之前已安装，因此在获取数据后不会发生任何事情（我认为即使组件的 render() 方法 returns false 也是如此。如果不正确，请在评论中告诉我)
只是不要挂载组件（在解决方案中，它是一个 <div key="1"> 标签）直到反应 class 收到数据。在 parent 组件上使用组件状态来跟踪异步请求的状态。
ReactCSSTransitionGroup 不能很好地处理表格，因为它的默认行为是用 span 元素包装标签。你可以用你自己的组件来提供它，但我发现解决方案非常繁重和复杂。
我有一个 different approach 允许 React 组件在每次内容更改时进行动画处理。通过在 2 个重复 CSS 样式之间切换不断触发动画。
除了 ReactCSSTransitionGroup，另一种方法是编写您自己的 css 转换，并在 componentdidmount 中添加到组件的 'enter' class。请记住，您应该更改 requestAnimationFrame 中的状态，否则您的 class 将在安装时添加到同一事件循环中，因此不会设置动画。这是一个例子： https://codesandbox.io/s/zkm5015y1x
另外，关于事件循环的更多信息，Jake Archibald 的演讲： https://www.youtube.com/watch?v=cCOL7MC4Pl0