重置transform:rotate(）而不调用-webkit transition:style

Reset transform: rotate() without invoking -webkit-transition: style

本文关键字：调用 -webkit transition style transform rotate 重置      更新时间：2023-09-26

我在画布上画一个轮子，旋转它，然后想将旋转重置为0。然而，由于css属性：重置旋转时为-webkit-transition: -webkit-transform 15s ease;，它是从r -> 0开始的旋转，需要15秒。有没有一种方法可以在不调用transform 15s ease的情况下重置旋转？

旋转变换完成后，我正在画布上重新绘制数据，因此需要立即重置。

非常感谢

var r=-(3600 + random);
$("#wheel").css("transform","rotate("+r+"deg)");
$("#wheel").css("-moz-transform","rotate("+r+"deg)");
$("#wheel").css("-webkit-transform","rotate("+r+"deg)");
$("#wheel").css("-o-transform","rotate("+r+"deg)");
$("#wheel").one('webkitTransitionEnd', function() {
    $("#wheel").css("transform","none");
    $("#wheel").css("-moz-transform","none");
    $("#wheel").css("-webkit-transform","none");
    $("#wheel").css("-o-transform","none");
});

我想我有一个解决方案。通过在将css类更改为动画旋转类之前将其短暂更改为"默认旋转"类，您可以控制每个单独类上的动画计时，以便在旋转到新位置之前使轮子捕捉回起始位置。

css：

.spin0 {
    transform: rotate(0deg);    
}
.spin750 {
    transform: rotate(750deg) !important;
    transition-duration: 2.5s !important;
}

js（点击）：

element.className = "spin0";
setTimeout(function(){
    element.className = "spin750";
}, 10);
相关文章：