我有一个 React 应用程序,在 Leaflet map 上有一个图标,一个介于 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>
)
}
最佳答案
显示“旋转”效果是因为您在计算中使用了模运算符。每次您碰到 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>
)
}
编辑:我根据评论中的对话更新了代码。
关于javascript - 是否有可能通过 0 度转换 :rotate(Xdeg)? 获得平滑的 CSS 过渡,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56665627/