Reactjs 更新列表时未激发动画css

我正在使用react动画css，用于react中的简单动画。我有一个在标记中呈现的列表。我正在将动画添加到列表的第一个元素

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

以下是完整代码：

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

在我看来，一旦状态得到更新，这个库就不会被重新渲染。 我用简单的css动画属性@keyframe进行了尝试，效果很好，并且在状态改变时重新渲染。 代码沙盒链接：

---

必须为映射中的每个元素定义键属性。如果未定义一个，则数组索引是默认键。因此，在每次渲染之后，将重用键为0的第一个元素，并且只添加最后一个元素。如果定义了一个键，将基于该键值重新绘制，并添加第一个键

    {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>
        );

---

下面是一个例子：

我认为这个动画标签使用了一个简单的动画。如果要操纵数组，应使用转换。您可以检查包含转换的其他库，例如react-spring或react-transition-group。它会在元素周围创建一个包装器div。这些样式不应该在添加新元素时应用吗？我一点也不知道。我不会使用它，因为它不是众所周知的，它几乎没有社区。这个演示的问题是不停的动画。要求动画只发生一次。我们也希望使用一些库而不是旧的CSS样式来实现这一点。最后添加的数据会不断反弹。因此，一旦添加最后一个元素“Rahane”，观察该元素是否继续反弹。不过还是要谢谢你的帮助，好的，明白了。我想彼得可能已经解决了你的问题。