使用 React 的 setInterval 动画只发生一次

【问题标题】：setInterval animation with React happens only once使用 React 的 setInterval 动画只发生一次
【发布时间】：2021-06-08 14:45:22
【问题描述】：

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

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

但是，这只是第一次旋转。我期待它在 5 秒内再次旋转。有什么想法吗？

【问题讨论】：

标签： javascript reactjs react-hooks css-animations use-ref

【解决方案1】：

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

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

这里是css动画的入门：

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

【讨论】：