Некорректно работает css transition в React, что может быть?

Question

[JS Noob]

Подскажите, пожалуйста, почему react убивает анимации transition, если у элементов в массиве ключи не меняются?
При этом в одну сторону он анимацию не трогает.
В моём примере анимация отрабатывает, если жать на кнопку left. Но на кнопку right анимация работает не так, как я ожидаю.
Пример в песке https://codesandbox.io/embed/flamboyant-kirch-49uc...

Answer 1

[Alexandroppolus]

Непонятно, как там форкнуться, потому вот исправленный код

г-код Дотс.джсх

import React, { useMemo } from "react";
import * as S from "./dots.style";

function makeData(dots, shift, width) {
  const normShift = shift >= 0 ? shift : shift - dots.length * shift;
  return dots.map((dot, index) => ({
    key: dot,
    isFirst: index === 0,
    isLast: index === dots.length - 1,
    left: ((normShift + index) % dots.length) * width
  }));
}

export const Dots = ({ dots, shift }) => {
  const data = useMemo(() => makeData(dots, shift, 25), [dots, shift]);

  return (
    <S.Container>
      {data.map(({ key, left, children }) => (
        <S.Dot key={key} left={left}>
          {key}
        </S.Dot>
      ))}
    </S.Container>
  );
};

проблема была вот в чем: переназначались key для элементов. Потому некоторые элементы оставались как есть и просто апдейтились, а некоторые пересоздавались (реакт не умеет перекидывать одни элементы через другие). Потому key надо сохранять, а просто менять left у всех

Comments

[JS Noob]

Но я же создаю key один раз и не меняю его, только элементы в массиве меняют свои места

[Alexandroppolus]

JS Noob, вот именно что меняют места.
Допустим, у тебя на первом рендере были ключи 1 и 2, а на следующем рендере уже 2 и 1 - поменялись местами. Тогда Реакт сможет сохранить один из двух отрендеренных компонентов и просто обновить его с анимацией (не могу точно сказать, какой именно из двух), но другой компонент будет уничтожен и создан заново, так как не может просто взять и поменяться местами. То есть будет реальное пересоздание ДОМ-элемента, и никакой анимации тут быть не может.