循环遍历数组时 useTransition 没有动画答案

【问题标题】：useTransition doesn't animate while cycling through an array循环遍历数组时 useTransition 没有动画
【发布时间】：2020-04-20 19:24:37
【问题描述】：

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

【问题讨论】：

您的示例似乎在点击时动画。有什么问题吗？
@PeterAmbruzs 哎呀。我粘贴了错误的链接。我现在修好了

标签： reactjs react-spring

【解决方案1】：

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

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

这个例子中的动画并不完美，但我可以找到一种方法来解决这些小故障，方法是使用 visibility 属性隐藏第一个和最后一个元素，这样第一个元素循环回到最后一个位置不会动画其余的。可以使用动态 z 索引来实现，但这个沙盒的目的不仅仅是展示我使用的主要方法。

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

【讨论】：