时间戳

首页 > 解决方案 > 循环遍历数组时 useTransition 没有动画

reactjs - 循环遍历数组时 useTransition 没有动画

问题描述

我在代码沙箱上创建了一个小例子来重现它。

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

标签： reactjsreact-spring

解决方案

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

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

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

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

推荐阅读