如何实现CSS rotate在0/360度区间的顺时针平滑过渡动画？

这个问题我之前也踩过坑！核心原因是CSS的transition在处理旋转角度时，会默认选择最短的旋转路径。当你从340deg切换到10deg时，它会计算出“逆时针转330度”比“顺时针转30度”路径更短，所以就出现了反向动画的诡异效果。

要解决这个问题，我们不能只存储0-359范围内的角度值，而是要存储累计的旋转总度数，让CSS能识别出我们想要的旋转方向。下面是具体的实现方案：

1. 调整状态存储逻辑 #

把原来只存0-359模值的状态，改成存储累计的旋转角度。比如初始值设为340，每次加10就直接加10（不用取模），减10就直接减10。这样CSS在计算transition时，会沿着我们期望的方向生成动画。

2. 修改组件代码 #

const App = () => {
  // 存储累计旋转角度，而非0-359的模值
  const [totalRotation, setTotalRotation] = React.useState(340);

  // 计算用于显示的0-359范围角度（处理负数情况）
  const displayRotation = (totalRotation % 360 + 360) % 360;

  return (
    <div id="wrapper">
      <div>
        <div className="box-wrapper">
          {/* 使用累计角度设置transform，确保动画方向正确 */}
          <div className="box" style={{ transform: `rotate(${totalRotation}deg)` }}>
            <span>{`Rotation: ${displayRotation}deg`}</span>
          </div>
        </div>
      </div>
      <div>
        <button onClick={() => setTotalRotation(prev => prev + 10)}>+10 deg</button>
        <button onClick={() => setTotalRotation(prev => prev - 10)}>-10 deg</button>
        <button onClick={() => setTotalRotation(340)}>340 deg</button>
        <button onClick={() => setTotalRotation(20)}>20 deg</button>
        {/* 测试跨0度的情况：370deg和10deg视觉效果一致，但动画是顺时针30度 */}
        <button onClick={() => setTotalRotation(370)}>370 deg (same as 10deg)</button>
      </div>
    </div>
  );
};

3. 关键细节解释 #

• 累计角度的作用：比如从340deg加两次10deg，得到360deg、370deg，rotate(370deg)和rotate(10deg)视觉上完全一样，但transition会从340deg平滑过渡到370deg，也就是顺时针旋转30度，完美符合你的需求。
• 显示角度处理：displayRotation通过取模和修正负数，把累计角度转换成用户熟悉的0-359范围值，不影响显示效果。
• CSS过渡设置：确保你的.box类（或者Leaflet图标的容器）已经添加了transition属性，比如：

.box {
  transition: transform 0.3s ease;
  /* 其他必要样式：比如固定尺寸、定位等 */
}

适配Leaflet图标 #

如果你是在Leaflet中使用自定义图标，原理完全相同：只需要把累计旋转角度应用到图标的DOM元素的transform属性上，而不是模360后的角度值，就能保证跨0度时的顺时针动画正常执行。

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