javascript - 重置变换: rotate() without invoking -webkit-transition: style

Question

我正在 Canvas 上画一个轮子，旋转它，然后想要将旋转重置为 0。但是由于 css 属性:-webkit-transition: -webkit-transform 15s ease;重置旋转时，从r -> 0旋转，需要15秒。有没有办法在不调用 transform 15s Easy 的情况下重置旋转？

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

非常感谢

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

Answer 1

我想我有一个解决方案。通过在将类更改为动画旋转类之前将 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);