useTransition 在循环遍历数组时不会设置动画

Question

我在 codesandbox 上创建了一个小例子来重现它。

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

由于以下 useEffect

，我可以轻松地循环遍历 items 数组

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 link 以了解问题所在并查看完整的示例代码。

Answer 1

我最终在没有 react-spring 的情况下做了一些更简单的事情。它几乎 100% CSS 基于（我使用 JS 间隔来触发随时间的变化）

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

此示例中的动画并不完美，但我可以找到一种方法来解决这些小问题，方法是使用 visibility 属性隐藏第一个和最后一个元素，以便第一个元素循环回到最后一个位置不会对其余部分进行动画处理。可以通过动态 z 索引来实现，但这不是这个沙箱的目的，只是为了展示我使用的主要方法。

我希望这能帮助人们登陆这里:)

useTransition 在循环遍历数组时不会设置动画

useTransition doesn't animate while cycling through an array

reactjs

react-spring