是否有可能通过 transform:rotate(Xdeg) 实现 0 度的平滑 CSS 过渡？

Question

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

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

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

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

示例 CodePen 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

显示 "spinning" 效果是因为您在计算中使用了模运算符。每次您碰到 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>
  )
}

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

是否有可能通过 transform:rotate(Xdeg) 实现 0 度的平滑 CSS 过渡？

Is it possible to get a smooth CSS transition through 0 degrees with transform:rotate(Xdeg)?

javascript

css

animation

css-transforms

reactjs