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

Question

我正在画布上画一个轮子，旋转它，然后想要将旋转重置为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");
});

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