在道具更改前做出反应以激活动画

Question

我有一个简单的react应用，其中包含3个组件：app，ul和li。该应用程序包含一系列项目。 该应用程序每5秒钟（以设置的间隔）将3个连续的项目切成薄片并将其发送到ul组件进行显示。如果我们从以下开始：

项目3

项目2

项目1

5秒后，列表将为：

项目4

项目3

项目2

我正在尝试创建一个动画，一旦ul的道具更新，它将下推当前列表，直到隐藏底部的项目，然后将其下的项目显示在顶部。 我考虑过使用getDerivedStateFromProps方法来激活动画，使用async等待来保持应用程序，直到动画结束（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. 使用许多支持Transition动画的React动画库之一。

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

祝你好运。