重置变换：旋转（）而不调用 -webkit-transition：样式答案

【问题标题】：Reset transform: rotate() without invoking -webkit-transition: style重置变换：旋转（）而不调用 -webkit-transition：样式
【发布时间】：2016-08-29 20:38:43
【问题描述】：

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

【问题讨论】：

暂时没有……没有。
@Paulie_D 有没有办法覆盖当前的-webkit-transition: 值并在重置期间将其设置为 1 秒？然后让它再等 15 秒
不要向元素添加过渡，而是使用它创建一个类，并在需要时切换元素上的类。

标签： javascript css canvas rotation

【解决方案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);

【讨论】：