useTransition не анимируется во время циклического перемещения по массиву - PullRequest
Новая
       11

useTransition не анимируется во время циклического перемещения по массиву

0 голосов
/ 16 апреля 2020

Я создал небольшой пример для codeandbox для его воспроизведения.

https://codesandbox.io/s/infallible-swirles-cbx74

Я могу легко циклически перемещаться по массиву items благодаря следующему useEffect

useEffect(() => {
  // taking the first element of the array and placing it at its end
  const h = () => set(items => [...items.slice(1), items[0]])

  setInterval(h, 2000)

  return () => {
    clearInterval(h)
  }
}, [])

Проблема в том, что я не могу найти способ одушевить их. Я думаю, что это, возможно, связано с keys, но я не могу понять, как я могу это исправить.

Пожалуйста, проверьте ссылку codeSandbox, чтобы понять, в чем проблема, и просмотреть полный пример кода.

1 Ответ

0 голосов
/ 20 апреля 2020

Я в конце концов сделал что-то проще без реактивной пружины. Это почти на 100% CSS основе (я использую интервал JS для запуска изменений во времени)

https://codesandbox.io/s/practical-fog-ubdhn?file= / src / App. js

Анимации не идеальны в этом примере, но я мог бы найти способ обойти эти незначительные глюки, скрыв первый и последний элементы с атрибутом visibility, чтобы первый элемент, возвращающийся к последней позиции, не анимировался над остаток. Может быть достигнуто с помощью динамических c z индексов, но целью этой песочницы не было просто показать основной подход, который я использовал.

Надеюсь, это поможет людям приземлиться здесь:)

...