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

Question

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

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

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

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

Answer 1

您必须为地图中的每个元素定义一个键属性。如果您没有定义一个，则数组索引是默认键。因此，每次渲染后都会重用键为 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>
        );

这是示例：https ://codesandbox.io/s/pedantic-darkness-vgp3f

Answer 2

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

代码沙箱链接：

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