Wie kann ich mit der .animate()-Methode von jQuery browserübergreifend kompatible CSS-Rotationsanimationen erzielen?

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

Auf der Suche nach einer browserübergreifenden kompatiblen Rotation tritt ein häufiges Hindernis auf, wenn man auf .animate() von jQuery stößt Verfahren. Während CSS-Transformationen allgegenwärtig geworden sind, bleiben sie im Bereich der Animation schwer fassbar. Dieser Artikel befasst sich mit dem Problem und bietet eine Lösung, die die Rotation mithilfe von .animate() ermöglicht und die Kompatibilität zwischen Browsern aufrechterhält.

Das Problem

Bedenken Sie den folgenden Codeausschnitt:

$(document).ready(function () { 
    DoRotate(30);
    AnimateRotate(30);
});

function DoRotate(d) {

    $("#MyDiv1").css({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform': 'rotate('+d+'deg)'
     });  
}

function AnimateRotate(d) {

        $("#MyDiv2").animate({
          '-moz-transform':'rotate('+d+'deg)',
          '-webkit-transform':'rotate('+d+'deg)',
          '-o-transform':'rotate('+d+'deg)',
          '-ms-transform':'rotate('+d+'deg)',
          'transform':'rotate('+d+'deg)'
     }, 1000); 
}

Dieser Code dreht effektiv ein Element mit der ID „MyDiv1“ mithilfe von .css(), die Drehung erfolgt jedoch nicht, wenn .animate() aufgerufen wird „MyDiv2.“ Diese Ungleichheit entsteht, weil CSS-Transformationen nicht von Natur aus mit Animationen mit jQuery kompatibel sind.

Die Lösung

Um CSS-Transformationen mit jQuery zu animieren, kann eine Problemumgehung mithilfe der Methode .animate() implementiert werden mit einem Schritt-Callback:

function AnimateRotate(angle) {
    // caching the object for performance reasons
    var $elem = $('#MyDiv2');

    // we use a pseudo object for the animation
    // (starts from `0` to `angle`), you can name it as you want
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            // in the step-callback (that is fired each step of the animation),
            // you can use the `now` paramter which contains the current
            // animation-position (`0` up to `angle`)
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

In dieser Lösung wird ein Pseudoobjekt von 0 Grad bis zum angegebenen Winkel animiert. Bei jedem Schritt dieser Animation wird die CSS-Transformationseigenschaft des Elements aktualisiert, wodurch es effektiv über die angegebene Dauer gleichmäßig rotiert wird.

jQuery-Plugin

Um den Prozess zu vereinfachen, können Sie ein jQuery-Plugin erstellen, das kapselt die Animation:

$.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:

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

Dieses Plugin bietet eine praktische Syntax zum Animieren Rotationen.

Fazit

Durch die Nutzung des Step-Callbacks in der .animate()-Methode von jQuery können Sie jetzt mithilfe von CSS-Transformationen browserübergreifend kompatible Rotationsanimationen für Elemente erzielen. Diese Technik ermöglicht reibungslose Rotationen, selbst in älteren Browsern, die CSS-Transformationen nicht nativ unterstützen.

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