Zurücksetzen der Transformation: rotate() ohne Aufruf von -webkit-transition: style

Question

Ich zeichne ein Rad auf einer Leinwand, rotiere es und möchte dann die Rotation auf 0 zurücksetzen. Allerdings aufgrund der CSS-Eigenschaft: -webkit-transition: -webkit-transform 15s ease; beim Zurücksetzen der Rotation Es ist Rotation von r -> 0 und dauert 15 Sekunden. Gibt es eine Möglichkeit, die Rotation ohne Aufruf der transform 15s ease zurückzusetzen?

Ich zeichne Daten auf der Zeichenfläche neu, nachdem die Rotationstransformation beendet wurde und somit ein sofortiges Zurücksetzen erforderlich ist.

Vielen Dank

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

Ich denke, dass ich eine Lösung für dieses. Wenn Sie die css-Klasse vor dem Ändern der Klasse in eine animierte Rotationsklasse kurz in eine "Standardrotations" -Klasse ändern, können Sie das Animationstiming für jede einzelne Klasse steuern, damit das Rad zur Startposition zurückschnellt, bevor es an die neue Position rotiert .

css:

.spin0 { 
    transform: rotate(0deg);  
} 

.spin750 { 
    transform: rotate(750deg) !important; 
    transition-duration: 2.5s !important; 
} 

js (auf Klick):

element.className = "spin0"; 

setTimeout(function(){ 
    element.className = "spin750"; 
}, 10);