更新列表时未触发 react-animated-css答案

【问题标题】：react-animated-css not fired when list is updated更新列表时未触发 react-animated-css
【发布时间】：2019-10-11 08:28:20
【问题描述】：

我正在使用 react-animated-css，用于简单的反应动画。我有一个列表，我在 <ul> 标记中呈现。我正在向列表的第一个元素添加动画。

此列表每 3 秒更新一次。并在数组的第一个位置添加新元素。问题是，加载时动画正在发生，但更新时没有。

这里是完整代码：https://codesandbox.io/embed/ecstatic-cloud-qdpcj

我无法创建名称为“react-animated-css”的标签，因为我不符合条件。如果有人为此创建一个会很有帮助。

【问题讨论】：

我认为这个Animated标签使用了一个简单的动画。如果要操作数组，则应使用转换。您可以检查其他一些包含过渡的库，例如 react-spring 或 react-transition-group。
它在元素周围创建一个包装 div。添加新元素时不应该应用这些样式吗？？
我根本不知道 react-animated-css。我不会使用它，因为它不为人所知，而且社区很少。

标签： reactjs react-animations

【解决方案1】：

您必须为地图中的每个元素定义一个键属性。如果您没有定义一个，则数组索引是默认键。因此，每次渲染后都会重用键为 0 的第一个元素，并且只会添加最后一个元素。如果你定义了一个key，会根据key的值重绘，并添加第一个。

    {items.map((d, i) => {
      if (i === 0) {
        return (
          <Animated
            key={d}
            animationIn="bounce"
            animationOut="flash"
            animationInDuration={1000}
            animationOutDuration={1000}
            isVisible={true}
          >
            <li>{d}</li>
          </Animated>
        );

示例如下：https://codesandbox.io/s/pedantic-darkness-vgp3f

【讨论】：

【解决方案2】：

在我看来，“react-animated-css”这个库在状态更新后不会重新渲染。
我已尝试使用简单的 css 动画属性“@keyframe”，并且工作正常，并在状态更改时重新渲染。

代码沙盒链接：

https://codesandbox.io/s/suspicious-dijkstra-h1q7u

【讨论】：

这个演示的问题是不停的动画。要求是动画应该只发生一次。还希望使用一些库而不是旧的 CSS 样式来实现这一点。
最后添加的数据不断反弹。因此，一旦添加了最后一个元素“Rahane”，请注意该元素会继续弹跳。不过还是感谢您的帮助。
好的，知道了。我认为彼得可能已经解决了你的问题。