我正在尝试为包含从其他地方获取的数据的 React 组件设置动画。把它放在一个ReactCSSTransitionGroup工作正常的地方。也就是说，直到我更改组件的render()方法以返回false，直到数据被获取（以防止它在没有数据的情况下被渲染）。
现在，我猜该组件会立即挂载，此时会添加动画类，但只会在之后渲染。这种想法正确吗？render返回实际组件时如何使组件动画化？
问问题
26039 次
3 回答
6
每当组件被添加和删除到它的props.children. 由于您的组件是在您获取数据之前安装的，因此在获取数据后不会发生任何事情（我认为即使组件的render()方法返回 false 也是如此。如果不正确，请在评论中告诉我）
只是在反应类收到数据之前不要安装组件（在解决方案中，它是一个<div key="1">标签）。使用父组件上的组件状态来跟踪异步请求的状态。
于 2015-03-03T11:37:28.503 回答
1
ReactCSSTransitionGroup 不能很好地处理表格，因为它的默认行为是用 span 元素包装标签。你可以为它提供你自己的组件，但我发现这个解决方案相当繁重和复杂。
我有一种不同的方法，它允许 React 组件在每次其内容更改时进行动画处理。通过在 2 个重复的 CSS 样式之间切换来不断触发动画。
于 2016-02-01T10:21:35.403 回答
0
除了 ReactCSSTransitionGroup，另一种方法是编写自己的 css 转换，并在 componentdidmount 中添加到组件中的 'enter' 类。请记住，您应该更改 requestAnimationFrame 中的状态，否则您的类将被添加到与挂载相同的事件循环中，因此不会动画。这是一个例子： https ://codesandbox.io/s/zkm5015y1x
此外，关于事件循环的更多信息，Jake Archibald 的演讲： https ://www.youtube.com/watch?v=cCOL7MC4Pl0
于 2018-12-18T06:27:22.490 回答