移除CSS动画类后如何保持动画的最终状态？

想要实现仅在鼠标移动时让正方形无限旋转的效果，通过isMouseMoving变量控制.spin动画类的添加/移除，但目前遇到的问题是：鼠标停止移动后，正方形会立刻回到旋转前的初始角度，即使给动画加上了forwards填充模式也无效。

解决方案 #

核心问题在于：移除.spin类时，CSS动画会被强制终止，元素的transform属性会重置为初始状态。我们需要换一种方式——直接通过JS记录并控制当前旋转角度，而不是依赖CSS动画类的切换。

修改后的完整代码如下：

<script>
  let rotation = 0;
  let moveTimer;
  let spinInterval;

  function handleMouseMove() {
    // 鼠标移动时，若未启动旋转则开启定时器
    if (!spinInterval) {
      spinInterval = setInterval(() => {
        rotation += 1; // 每次增加1度，可调整转速
      }, 16); // 约60帧每秒的间隔，保证流畅度
    }
    // 重置鼠标停止的延迟定时器
    clearTimeout(moveTimer);
    moveTimer = setTimeout(handleMouseStop, 30);
  }

  function handleMouseStop() {
    // 清除旋转定时器，暂停旋转
    clearInterval(spinInterval);
    spinInterval = null;
  }
</script>

<main on:mousemove={handleMouseMove}>
  <section>
    <div class="square" style:transform={`rotate(${rotation}deg)`}></div>
  </section>
</main>

<style>
.square {
  height: 50px;
  width: 50px;
  background: purple;
  transition: transform 0.016s linear; /* 让旋转过渡更平滑 */
}
</style>

关键改动说明 #

• 用rotation变量实时记录当前旋转角度，初始值为0
• 鼠标移动时启动setInterval，持续递增rotation值，实现无限旋转
• 鼠标停止时清除setInterval，暂停旋转，此时rotation保留当前值，元素自然停在当前角度
• 通过style:transform直接绑定旋转样式，代替CSS动画类，彻底避免样式重置问题
• 可选添加transition属性，让旋转过程更流畅

内容的提问来源于stack exchange，提问作者Raphael