是否可以通过 transform:rotate(Xdeg) 获得平滑的 CSS 过渡到 0 度？

Question

我有一个 React 应用程序，它在 Leaflet 地图上有一个图标，一个 0 到 359 之间的值表示它的当前方向。

我想transform: rotate(Xdeg) 图标并使用transition 让它为这个旋转设置动画。

我的问题是当值通过0（或360）时，转换发生在相反的方向。

是否可以将带有transform: rotate(340deg) 的框更改为transform: rotate(10deg) 并使其顺时针旋转？

示例代码笔here

const App = () => {
  const [rotation, setRotation] = React.useState(340);

  return (
    <div id="wrapper">
      <div>
        <div className="box-wrapper">
          {/* Here is where I'm setting the rotation CSS transform dynamically */}
          <div className="box" style={{ transform: `rotate(${rotation}deg)` }}>
            <span>{ `Rotation: ${rotation}deg` }</span>
          </div>
        </div>
      </div>

      <div>
        <button onClick={() => setRotation((rotation + 10) % 360)}>+10 deg</button>
        <button onClick={() => setRotation(((360 + (rotation - 10)) % 360))}>-10 deg</button>
        <button onClick={() => setRotation(340)}>340 deg</button>
        <button onClick={() => setRotation(20)}>20 deg</button>
      </div>
    </div>
  )
}

Answer 1

显示“旋转”效果是因为您在计算中使用了模运算符。每次到达 0 或 359 的边界时，它都会翻转。如果您在计算中删除模运算符并仅使用它来显示度数，那么它应该可以正常工作。

我创建了您的 CodePen link 的修改版本。

const App = () => {
  const [rotation, setRotation] = React.useState(340);
  function setRotation1(val) {
    let angle = rotation % 360;
    let diff = (360 - (angle - val))%360;

    if(diff > 180) {
      diff = (360-diff);
      setRotation(rotation - diff);
    } else {
      setRotation(rotation + diff);
    }
  }

  return (
    <div id="wrapper">
      <div id="demo">
        <div className="box-wrapper">
          {/* Here is where I'm setting the rotation CSS transform dynamically */}
          <div className="box" style={{ transform: `rotate(${rotation}deg)` }}>
            <span>{ `Rotation: ${(360+(rotation%360))%360}deg` }</span>
          </div>
        </div>
      </div>

      <div>
        <button onClick={() => setRotation(rotation + 10)}>+10 deg</button>
        <button onClick={() => setRotation(rotation - 10)}>-10 deg</button>
        <button onClick={() => setRotation1(340)}>340 deg</button>
        <button onClick={() => setRotation1(20)}>20 deg</button>
      </div>
    </div>
  )
}

编辑：我根据 cmets 中的对话更新了代码。