我有有时旋转的元素transform: rotate()。我想通过使用来平滑状态之间的转换transition: transform。问题是学位rotate()被硬编码为始终在-360 and +360，所以一整轮度数的值从359 to 0并且动画会返回整圈，而不是向右平滑的小动画。有什么办法可以“以最短的方式”实现过渡？
Update:角度是根据相机位置计算的，因此我现在无法使用无限的度值。
澄清：我现在无法更改js代码，只能更改CSS。所以只有[0, 360)此刻的度数。演示仅模拟我所处的情况。
DEMO https://jsfiddle.net/xvzme0q6/2/
o = document.querySelector("#arrow");
t = document.querySelector("#text");
angle = 0;
delta = 2;
FULL_TURN = 360;
document.querySelector("html").addEventListener("mousemove", (e) => {
if (e.buttons === 1) {
if (e.movementX > 0) {
angle += delta;
}
if (e.movementX < 0) {
angle -= delta;
}
angle %= FULL_TURN;
o.style.transform = "rotate(" + angle + "deg)";
t.innerText = angle + "deg";
}
})
#arrow {
font-size: 6em;
width: 150px;
text-align: center;
user-select: none;
transform-origin: 50% 60%;
transition: transform 0.2s linear;
}
<header>Drag mouse left or right</header>
<span id="text">0deg</span>
<div id="arrow">↑</div>
您可以只计算“轮数”，并将每轮 360 添加到您的角度中：
value = angle + rounds*360;
请参阅此工作示例：
o = document.querySelector("#arrow");
t = document.querySelector("#text");
angle = 0;
delta = 2;
FULL_TURN = 360;
rounds = 0;
document.querySelector("html").addEventListener("mousemove", (e)=>{
if (e.buttons === 1) {
if (e.movementX > 0) {
angle += delta;
if (angle >= 360) rounds++;
}
if (e.movementX < 0) {
angle -= delta;
if (angle <= -360) rounds--;
}
angle %= FULL_TURN;
value = angle + rounds*360;
o.style.transform = "rotate(" + value + "deg)";
t.innerText = angle + "deg";
}
})
#arrow {
font-size: 10em;
width: 150px;
text-align: center;
user-select: none;
transform-origin: 50% 60%;
transition: transform 0.2s linear;
}
body {
padding: 10px;
}
header {
margin-bottom: 10px;
}
<header>Drag mouse left or right</header>
<span id="text">0deg</span>
<div id="arrow">↑</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
