Wie kann ich mit jQuery browserübergreifende CSS-Rotationsanimationen erzielen?

Browserübergreifende CSS-Rotation mit jQuery.animate()

Problem:

Leistung CSS-Rotationsanimationen mit jQuery.animate() funktionieren nicht browserübergreifend. Die Rotation funktioniert bei Verwendung von .css(), jedoch nicht bei Verwendung von .animate().

Ursache:

CSS-Transformationen können nicht direkt mit jQuery animiert werden.

Lösung:

Zum Durchführen von CSS-Transformationsanimationen mit jQuery können Sie die folgende alternative Methode verwenden:

function AnimateRotate(angle) {
    var $elem = $('#MyDiv2');
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

Erklärung:

Diese Methode verwendet eine benutzerdefinierte „Schritt“-Rückruffunktion, um die „Transform“-Eigenschaft zu aktualisieren des ausgewählten Elements bei jedem Schritt der Animation. Die „Step“-Funktion erhält (jetzt) ​​die aktuelle Animationsposition als Parameter, mit der Sie den gewünschten Drehwinkel berechnen können.

Plugin:

Das können Sie Binden Sie diese Methode zur Vereinfachung in ein jQuery-Plugin ein verwenden:

$.fn.animateRotate = function(angle, duration, easing, complete) {
    return this.each(function() {
        var $elem = $(this);
        $({deg: 0}).animate({deg: angle}, {
            duration: duration,
            easing: easing,
            step: function(now) {
                $elem.css({
                   transform: 'rotate(' + now + 'deg)'
                 });
            },
            complete: complete || $.noop
        });
    });
};

Verwendung:

Um das Plugin zu nutzen, können Sie einfach aufrufen:

$('#MyDiv2').animateRotate(90);

Updates:

Die bereitgestellte Lösung wurde mehrmals aktualisiert, um die Effizienz zu verbessern und mehr zu bieten Flexibilität.

• Update 2: Optimiert, um die Reihenfolge der Argumente unbedeutend zu machen.
• Update 2.1: Ein Kontextproblem mit dem wurde behoben Kompletter Rückruf.
• Update 2.2: Start hinzugefügt Parameter zum Umschalten von Animationen.

Zusätzliche Verwendungsdetails:

• Die animateRotate-Funktion akzeptiert mehrere optionale Parameter, einschließlich Dauer, Beschleunigung und Vollständigkeit, mit Standardwerte werden bereitgestellt.
• Der Benutzer kann diese Parameter auf verschiedene Arten bereitstellen, entweder als Positionsargumente oder als Objekt.
• Die „Schritt“-Funktion bietet zusätzliche Kontrolle über die Drehung bei jedem Animationsschritt.

Das obige ist der detaillierte Inhalt vonWie kann ich mit jQuery browserübergreifende CSS-Rotationsanimationen erzielen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!