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

Posted 2023-02-25

【中文标题】使用 React 的 setInterval 动画只发生一次

【英文标题】：setInterval animation with React happens only once

【发布时间】：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 秒内再次旋转。有什么想法吗？

【参考方案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