JS+CSS实现无限顺时针旋转：setTimeout(0)与requestAnimationFrame差异

问题背景 #

你需要实现元素的顺时针循环旋转效果：数值0-3对应每次90度旋转，当数值超出3重置为0时，要避免出现逆时针过渡。你的思路是先将数值设为-1并禁用过渡，再恢复过渡设为0来模拟顺时针，但实际测试中requestAnimationFrame无法实现预期效果，setTimeout(0)却能正常工作。

两者的核心差异 #

1. 执行时机与渲染周期的关联 #

• setTimeout(0)：回调会被放入宏任务队列，在当前同步代码执行完毕后，等待下一次事件循环的宏任务阶段才执行。此时浏览器已经完成了同步代码中修改DOM（设置transition: none和--value: -1）的重排与重绘，回调中恢复过渡并设置--value:0的操作会触发新的过渡动画，浏览器能正确识别中间的临时状态。
• requestAnimationFrame：回调会被安排在下一次浏览器重绘之前执行。同步代码中修改的DOM样式还没触发实际的重排重绘，回调里的样式修改会和之前的操作合并成一次重排重绘。浏览器会直接忽略中间的transition: none和--value:-1的临时状态，相当于从--value:3直接过渡到--value:0，自然出现逆时针动画。

2. 浏览器的样式修改合并机制 #

浏览器为了优化性能，会对同一渲染周期内的DOM样式修改进行批量处理，避免频繁重排重绘。requestAnimationFrame的回调属于当前渲染周期的一部分，所以你同步代码里的样式修改和回调里的修改会被合并：

// 同步代码操作
rotate.style.setProperty("transition", "none");
rotate.style.setProperty("--value", "-1");
// requestAnimationFrame回调操作
rotate.style.removeProperty("transition");
rotate.style.setProperty("--value", "0");

这四步最终被浏览器简化为“从--value:3过渡到--value:0”，完全跳过了-1的临时状态，导致重置时的动画不符合预期。

而setTimeout(0)的回调处于下一个事件循环的宏任务中，属于新的渲染周期，同步代码的样式修改已经完成渲染，回调中的修改会触发新的渲染流程，浏览器会先显示--value:-1（无过渡），再平滑过渡到--value:0，实现顺时针的视觉效果。

让requestAnimationFrame生效的修正方案 #

如果想使用requestAnimationFrame实现效果，需要强制浏览器先渲染同步代码中的临时状态，比如在同步代码中读取一个会触发重排的属性（如offsetHeight）：

function rotate(){
  let rotate = document.querySelector(".rotate");
  let value = ++rotate.dataset.value % 4;
  let cb = null;
  if(value === 0){
    rotate.style.setProperty("transition", "none");
    value = -1;
    rotate.style.setProperty("--value", value);
    // 强制触发重排，让浏览器渲染当前临时状态
    void rotate.offsetHeight;
    cb = () => {
      rotate.style.removeProperty("transition");
      rotate.style.setProperty("--value", "0");
    };
  } else {
    rotate.style.setProperty("--value", value);
  }
  return cb;
}

这样requestAnimationFrame的回调执行时，--value:-1的状态已经被渲染，后续的过渡就能正常触发顺时针动画。

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