Comment puis-je réaliser des animations de rotation CSS compatibles avec plusieurs navigateurs à l'aide de la méthode .animate() de jQuery ?

Rotation CSS multi-navigateurs à l'aide de jQuery.animate()

Dans la poursuite de la création d'une rotation compatible entre navigateurs, un obstacle courant survient lors de la rencontre avec .animate() de jQuery méthode. Même si les transformations CSS sont devenues omniprésentes, elles restent insaisissables dans le domaine de l'animation. Cet article aborde le problème en proposant une solution permettant la rotation à l'aide de .animate() et en maintenant la compatibilité entre les navigateurs.

Le problème

Considérez l'extrait de code suivant :

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

Ce code fait effectivement pivoter un élément avec l'ID "MyDiv1" en utilisant .css(), mais la rotation ne se produit pas lors de l'appel de .animate() sur "MaDiv2." Cette disparité est due au fait que les transformations CSS ne sont pas intrinsèquement compatibles avec l'animation utilisant jQuery.

La solution

Pour animer les transformations CSS avec jQuery, une solution de contournement peut être implémentée à l'aide de la méthode .animate(). avec un rappel pas à pas :

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

Dans cette solution, un pseudo-objet est animé de 0 degré à l'angle spécifié. Chaque étape de cette animation met à jour la propriété de transformation CSS de l'élément, le faisant effectivement pivoter en douceur sur la durée spécifiée.

Plugin jQuery

Pour simplifier le processus, vous pouvez créer un plugin jQuery qui encapsule l'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
    });
  });
};

Utilisation :

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

Ce plugin fournit une syntaxe pratique pour animer rotations.

Conclusion

En tirant parti du rappel d'étape dans la méthode .animate() de jQuery, vous pouvez désormais réaliser des animations de rotation compatibles avec tous les navigateurs pour les éléments à l'aide de CSS-Transforms. Cette technique permet des rotations fluides, même dans les navigateurs plus anciens qui ne supportent pas nativement les CSS-Transforms.

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!