変換をリセットする：-webkit-transitionを呼び出さずにrotate（）を呼び出す：

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