response-animated-css не запускается при обновлении списка

Question

Я использую реагировать-анимированные-CSS, для простой анимации в реакции. У меня есть список, который я отображаю в теге <ul>. Я добавляю анимацию к первому элементу списка.

Этот список обновляется каждые 3 секунды. И новый элемент добавляется на первую позицию в массиве. Проблема в том, что при загрузке анимация происходит, но не при обновлении.

Вот полный код: https://codesandbox.io/embed/ecstatic-cloud-qdpcj

Я не могу создать тег с «реакция-имя 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

• С моей точки зрения "response-animated-css", эта библиотека не получает повторно визуализированных после обновления состояния.
• Я попробовал это с простымcss анимационное свойство "@keyframe" работает нормально и перерисовывается при изменении состояния.

Ссылка на код-песочницу:

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