@JS_Noob
Пишу плохой код профессионально

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

Подскажите, пожалуйста, почему react убивает анимации transition, если у элементов в массиве ключи не меняются?
При этом в одну сторону он анимацию не трогает.
В моём примере анимация отрабатывает, если жать на кнопку left. Но на кнопку right анимация работает не так, как я ожидаю.
Пример в песке https://codesandbox.io/embed/flamboyant-kirch-49uc...
  • Вопрос задан
  • 146 просмотров
Решения вопроса 1
Alexandroppolus
@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 у всех
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы