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类更改为＆＃39;默认轮换＆＃39;在将类更改为动画旋转类之前，您可以暂时控制每个单独类的动画时序，以便在旋转到新位置之前让轮子快速回到起始位置。

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

重置转换：rotate（）而不调用-webkit-transition：style

1 个答案: