Warum funktioniert jQuery.animate() nicht für CSS3-Rotationen und wie können wir mit jQuery browserübergreifende animierte Rotationen erreichen?

Cross-Browser-Rotation mit jQuery.animate()

Problem

Cross-Browser-Rotation mit jQuery.animate() erweist sich aufgrund der als herausfordernd Nichtanimationsfunktionen von CSS-Transformationen. Der folgende Code veranschaulicht das Problem:

$(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); 
}

Rotation funktioniert bei Verwendung von .css(), jedoch nicht bei .animate(). Warum? Und wie können wir dieses Hindernis überwinden?

Lösung

Während CSS-Transformationen in jQuery keine direkte Animationsunterstützung bieten, ist eine Problemumgehung mit einem Step-Callback wie diesem möglich:

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

    // Use a pseudo object for the animation (starts from `0` to `angle`)
    $({deg: 0}).animate({deg: angle}, {
        duration: 2000,
        step: function(now) {
            // Use the `now` parameter (current animation position) in the step-callback
            $elem.css({
                transform: 'rotate(' + now + 'deg)'
            });
        }
    });
}

Diese Methode ermöglicht die Drehung von Elementen mithilfe von jQuery. Darüber hinaus macht jQuery 1.7 die Notwendigkeit von CSS3-Transformationspräfixen überflüssig.

jQuery-Plugin

Um den Prozess zu vereinfachen, erstellen Sie ein jQuery-Plugin wie dieses:

$.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
    });
  });
};

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

Optimiertes Plugin

Für eine bessere Effizienz und Flexibilität kann ein optimiertes Plugin verwendet werden erstellt:

$.fn.animateRotate = function(angle, duration, easing, complete) {
  var args = $.speed(duration, easing, complete);
  var step = args.step;
  return this.each(function(i, e) {
    args.complete = $.proxy(args.complete, e);
    args.step = function(now) {
      $.style(e, 'transform', 'rotate(' + now + 'deg)');
      if (step) return step.apply(e, arguments);
    };

    $({deg: 0}).animate({deg: angle}, args);
  });
};

Verwendung

Das Plugin bietet zwei Möglichkeiten, es zu verwenden:

1. Einzeilige Syntax:

$(node).animateRotate(90);
$(node).animateRotate(90, function () {});
$(node).animateRotate(90, 1337, 'linear', function () {});

2. Objektsyntax (bevorzugt für mehr als drei Argumente):

$(node).animateRotate(90, {
  duration: 1337,
  easing: 'linear',
  complete: function () {},
  step: function () {}
});

Fazit

Dieses Plugin ermöglicht die browserübergreifende CSS-Rotation mithilfe der Animationsfunktionen von jQuery. Es macht manuelle Rotationsberechnungen überflüssig und bietet eine bequeme und optimierte Möglichkeit, Rotationseffekte zu erzielen.

Das obige ist der detaillierte Inhalt vonWarum funktioniert jQuery.animate() nicht für CSS3-Rotationen und wie können wir mit jQuery browserübergreifende animierte Rotationen erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!