重置变换：rotate（），而不调用-webkit-transition：style [英] Reset transform: rotate() without invoking -webkit-transition: style

问题描述

我正在画布上绘制一个轮子，旋转它，然后想将旋转值重置为0。但是由于css属性： -webkit-transition：-webkit-transform 15s easy; 重置旋转时，它是 r->中的旋转。 0 ，耗时15秒。是否可以在不调用 transform 15s easy 的情况下重置轮播？

I am drawing a wheel on a canvas, rotating it and then wanting to reset the rotation to 0. however due to the css property: -webkit-transition: -webkit-transform 15s ease; when resetting the rotation, it is rotation from r -> 0 and taking 15 seconds. Is there a way to reset the rotation without invoking the transform 15s ease?

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

I am redrawing data on the canvas after the rotation transform has finished thus needing an instant reset.

非常感谢

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类更改为默认旋转类，然后再将其更改为动画旋转类，您可以控制每个单独类的动画定时，以便在旋转到新位置之前使滚轮恢复到起始位置。

I think I have a solution for this. By changing the css class to a 'default rotation' class briefly before changing the class to your animated rotation class you can control the animation timing on each separate class in order to have the wheel snap back to the starting position before rotating to your new position.

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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！