Comment puis-je réaliser des animations de rotation CSS multi-navigateurs avec jQuery ?

Rotation CSS multi-navigateurs avec jQuery.animate()

Problème :

Performance Les animations de rotation CSS utilisant jQuery.animate() ne fonctionnent pas sur plusieurs navigateurs. La rotation fonctionne lors de l'utilisation de .css(), mais pas lors de l'utilisation de .animate().

Cause :

Les transformations CSS ne peuvent pas être directement animées avec jQuery.

Solution :

Pour effectuer des animations CSS-Transform en utilisant jQuery, vous pouvez utiliser la méthode alternative suivante :

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

Explication :

Cette méthode utilise une fonction de rappel "step" personnalisée pour mettre à jour la propriété "transform" de l'élément sélectionné à chaque étape de l'animation. La fonction "step" reçoit la position actuelle de l'animation (maintenant) comme paramètre, que vous pouvez utiliser pour calculer l'angle de rotation souhaité.

Plugin :

Vous pouvez enveloppez cette méthode dans un plugin jQuery pour plus de facilité utilisation :

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

Pour utiliser le plugin, vous pouvez simplement appeler :

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

Mises à jour :

La solution fournie a été mise à jour plusieurs fois pour améliorer l'efficacité et fournir plus flexibilité.

• Mise à jour 2 : Optimisée pour rendre l'ordre des arguments insignifiant.
• Mise à jour 2.1 : Correction d'un problème de contexte avec le rappel complet.
• Mise à jour 2.2 : ajoutée un paramètre de démarrage pour basculer les animations.

Détails d'utilisation supplémentaires :

• La fonction animateRotate accepte plusieurs paramètres facultatifs, notamment la durée, l'assouplissement et la fin. , avec des valeurs par défaut fournies.
• L'utilisateur peut fournir ces paramètres de différentes manières, soit sous forme d'arguments de position, soit sous forme de objet.
• La fonction "step" offre un contrôle supplémentaire sur la rotation à chaque étape de l'animation.

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!