时间戳

首页 > 解决方案 > 是否可以通过 transform:rotate(Xdeg) 获得平滑的 CSS 过渡到 0 度？

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

问题描述

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

我想要transform: rotate(Xdeg)图标并使用transition它来制作这个旋转的动画。

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

transform: rotate(340deg)是否可以用to更改一个盒子transform: rotate(10deg)并让它顺时针旋转？

示例 CodePen在这里

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>
  )
}

标签： javascriptcssreactjsanimationcss-transforms

解决方案

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

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

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>
  )
}

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

推荐阅读