Pourquoi jQuery.animate() ne fonctionne-t-il pas pour les rotations CSS3, et comment pouvons-nous réaliser des rotations animées entre navigateurs à l'aide de jQuery ?

Rotation entre navigateurs avec jQuery.animate()

Problème

La rotation entre navigateurs avec jQuery.animate() s'avère difficile en raison de la capacités de non-animation de CSS-Transforms. Le code ci-dessous illustre le problème :

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

La rotation fonctionne lors de l'utilisation de .css(), mais pas avec .animate(). Pourquoi? Et comment pouvons-nous surmonter cet obstacle ?

Solution

Bien que les transformations CSS ne prennent pas en charge l'animation directe dans jQuery, une solution de contournement est possible en utilisant un rappel par étapes comme celui-ci :

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

Cette méthode permet la rotation des éléments à l'aide de jQuery. De plus, jQuery 1.7 élimine le besoin de préfixes de transformation CSS3.

Plugin jQuery

Pour simplifier le processus, créez un plugin jQuery comme celui-ci :

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

Plugin optimisé

Pour une meilleure efficacité et flexibilité, un plugin optimisé peut être créé :

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

Utilisation

Le plugin propose deux façons de l'utiliser :

1. Syntaxe sur une seule ligne :

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

2. Syntaxe objet (de préférence pour plus de trois arguments) :

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

Conclusion

Ce plugin permet la rotation CSS entre navigateurs en utilisant les capacités d'animation de jQuery. Il élimine le besoin de calculs de rotation manuels et fournit un moyen pratique et optimisé d'obtenir des effets de rotation.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!