是否有可能通过转换:旋转(Xdeg)通过0度获得一个平稳的CSS转换？
是否有可能通过转换:旋转(Xdeg)通过0度获得一个平稳的CSS转换？
提问于 2019-06-19 10:33:06
我有一个direction应用程序，在传单地图上有一个图标，值在0到359之间，以表示它的当前方向。
我想transform: rotate(Xdeg)的图标，并使用transition使其动画这个旋转。
我的问题是，当值传递0 (或360)时，转换发生在相反的方向。
是否有可能用transform: rotate(340deg)将一个盒子改为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>
)
}回答 1
Stack Overflow用户
回答已采纳
发布于 2019-06-19 10:44:51
显示“旋转”效果是因为在计算中使用的是模运算符。每次你到达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>
)
}编辑：我根据评论中的对话更新了代码。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56665627
复制相关文章
相似问题
腾讯云开发者
