React 的 setInterval 动画只发生一次

Question

我想使用 React 每 5 秒旋转一次图像。我正在使用反应钩子。这是我的代码：

  const imageRef = React.useRef(null)
  React.useEffect(() => {
  setInterval(() => {
    imageRef.current.style.animationDuration  = "2s"
    imageRef.current.style.transform = "rotate(360deg)"
     
  }, 5000)
}, [])

然而，这只是第一次轮换。我希望它在 5 秒后再次旋转。有什么想法吗？

Answer 1

每次将元素的样式设置为 transform: rotate(360deg)，因此 transform 属性在 360 度和 360 度之间进行插值...这没什么。

您最好使用从 transform:rotate(0deg) 开始的 css 动画，在 2 秒内移动到 transform:rorate(360deg)，等待 3 秒，然后无限重复。为元素分配相关的 class，例如.intervalSpin.

这是 css 动画的入门读物：

https://www.w3schools.com/css/css3_animations.asp

React 的 setInterval 动画只发生一次

setInterval animation with React happens only once

javascript

css-animations

reactjs

react-hooks

use-ref