在道具改变之前反应激活动画

Question

我有一个简单的 react 应用程序，它包含 3 个组件：app、ul 和 li。该应用程序包含一系列项目。 每隔 5 秒（有设定的时间间隔），应用程序会切分 3 个连续的项目并将它们发送到 ul 组件以进行显示。如果我们开始：

项目 3

项目 2

项目 1

5 秒后列表将是：

项目 4

项目 3

项目 2

我正在尝试创建一个动画，一旦更新 ul 的道具，将向下推当前列表，直到隐藏底部项目，然后下一个项目应该出现在顶部。 我考虑过使用 getDerivedStateFromProps 方法来激活动画，使用 async await 保持应用程序直到动画结束（translateY），然后在新项目上应用另一个不透明动画。 我认为这不是一个好的解决方案，我认为必须有更简单的方法来做到这一点。 我也尝试过使用 react 过渡组，但它只在项目出现时有效，而在内容发生变化时无效。 如果有人能指出我正确的方向，我会很高兴。

Answer 1

在 React 中有很多选项可以为此类事件设置动画。

它通常被称为Transition，因为您需要在组件卸载之前对其进行动画处理。您可以：

1. 自己实现：

   通过在<ul> 组件中使用状态。你的ul 应该跟踪 它在其状态下呈现的每个项目，并且只删除一个项目 当该项目在其末尾调用回调时从列表中 动画。

   使您的 li 组件能够接收 shouldGoAway 属性为 一个布尔值和一个animationCallback，当 动画结束了。 li 应该检查if prop.shouldGoAway 如果 确实应该动画自己掉出视野（使用反应 像react-spring这样的动画库，一个js动画库 喜欢animejs 或pure CSS animations) 并致电 animationCallback 完成后。

2. 使用众多支持过渡动画的 React 动画库之一。

   想到的选择是react-transition-group、react-spring 和react-motion。

祝你好运。