Comment puis-je obtenir une rotation CSS compatible entre navigateurs avec .animate() de jQuery ?

Rotation CSS : compatibilité entre navigateurs avec jQuery.animate()

Dans le but d'obtenir une rotation compatible entre navigateurs (IE9) , vous pouvez rencontrer des difficultés lors de l'utilisation des méthodes .css() et .animate() de jQuery. .css() active la rotation, mais .animate() ne parvient pas à le faire. Pour résoudre ce problème, le plugin .animateRotate() fournit une solution élégante.

jQuery.animateRotate()

.animateRotate() offre une interface conviviale pour animation des transformations CSS. Voici les arguments qu'il accepte :

• angle : Spécifie l'angle de rotation en degrés.
• durée : Définit la durée de l'animation, par défaut à 400 millisecondes.
• easing : Détermine le fonction d'accélération de l'animation, par défaut "swing".
• Il existe deux manières principales d'utiliser .animateRotate(). La méthode la plus courte consiste à passer l'angle directement comme argument :
Ou, pour plus de contrôle, vous pouvez passer un objet avec des options supplémentaires :

Fonction Step :

La fonction étape permet d'effectuer des actions supplémentaires lors de chaque étape de l'animation. C'est particulièrement utile pour les transitions personnalisées.

$(node).animateRotate(90);

Dans les coulisses :

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

.animateRotate() utilise une technique connue sous le nom de transformation CSS avec animation. Au lieu d’animer directement la rotation, il anime une valeur d’angle, qui est ensuite appliquée à la propriété de transformation. Cette solution de contournement permet l'animation dans les navigateurs qui ne prennent pas en charge l'animation de transformation CSS directe.

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!