反应在道具发生变化之前激活动画

Question

我有一个简单的React应用程序，其中包含3个组件：App，ul和li。该应用程序包含一系列项目。每5秒（带有设置间隔）App Slices 3连续的项目，并将其发送到要显示的UL组件。如果我们以：

开始

项目3

项目2

项目1

5秒后，列表将是：

项目4

项目3

项目2

我正在尝试创建一个动画，一旦对UL的道具进行了更新，将推下当前列表，直到隐藏底部项目，然后下一个项目应出现在顶部。我考虑使用使用getDerivedStateFromprops方法激活动画，使用异步等待应用程序保存该应用程序，直到动画结束（翻译），然后在新项目上应用另一个不透明度的动画。我认为这不是一个很好的解决方案，我认为必须有更简单的方法来做到这一点。我还尝试使用React Transition组，但仅在项目出现时才有效，而在内容正在更改时则不起作用。如果有人可以将我指向正确的方向，我会很乐意。

Answer 1

有很多选项可以在React中使用此类事件进行动画。

通常称为 transition ，因为您需要在卸载组件之前对组件进行动画动画。您可以：

1. 自己实施：

   通过在<ul>组件中使用状态。您的ul应该保持跟踪在其状态下渲染的每个项目中，仅删除项目从列表中，该项目在其末尾调用了回调动画。

   使您的Li组件能够接收shouldGoAway Prop布尔值和animationCallback，当动画结束了。Li应该检查if prop.shouldGoAway，如果的确，应该使自己动画出来（使用React）动画库（例如React-Spring），JS动画库像动漫J或纯CSS动画）并致电 animationCallback完成后。

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

   想到的选择是反应 - 转变组，反应弹簧和反应运动。

祝你好运。