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

Question

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

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

完整代码如下：https://codesandbox.io/embed/ecstatic-cloud-qdpcj

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

Answer 1

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

代码沙箱 link :

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

Answer 2

您必须为地图中的每个元素定义一个键属性。如果你没有定义一个数组索引是默认键。因此，第一个键为 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

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

react-animated-css not fired when list is updated

reactjs

react-animations