Maison >interface Web >tutoriel CSS >Comment puis-je relancer de manière fiable les animations CSS WebKit à l'aide de JavaScript ?

Comment puis-je relancer de manière fiable les animations CSS WebKit à l'aide de JavaScript ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-30 06:29:14662parcourir

How Can I Reliably Re-trigger WebKit CSS Animations Using JavaScript?

Redéclencher impérativement les animations CSS WebKit

Lorsque vous travaillez avec des animations CSS WebKit, des limitations peuvent survenir lorsque vous tentez de redéclencher des animations plusieurs fois . Cet article aborde de tels scénarios et propose des solutions pour relancer les animations CSS via JavaScript sans recourir à des délais d'attente ou à des animations supplémentaires.

Pour y parvenir, les navigateurs WebKit utilisent l'événement "webkitAnimationEnd", qui est déclenché à la fin de l'exécution. cycle d'animations. En capitalisant sur cet événement, il devient possible de réinitialiser et de relancer des animations par programmation.

Implémentation de Vanilla JavaScript

En JavaScript pur, l'approche implique :

  1. Sélection de l'élément à animer.
  2. Ajout d'un écouteur d'événement au Événement "webkitAnimationEnd".
  3. Réinitialisation de l'animation lors du déclenchement de l'événement.
var element = document.getElementById('box');

element.addEventListener('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
}, false);

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
};

Implémentation de jQuery

L'utilisation de jQuery offre une syntaxe simplifiée :

var $element = $('#box').bind('webkitAnimationEnd', function(){
    this.style.webkitAnimationName = '';
});

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
});

CSS multi-navigateurs Assistance

Pour une compatibilité entre navigateurs, envisagez d'utiliser une bibliothèque de détection de navigateur. Les tests de transition CSS3 fournissent un objet de support qui peut aider à identifier les noms d'événements et les propriétés d'animation corrects pour différents navigateurs.

// Browser detection object
var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style;
    return {
        transform: divStyle.MozTransform  ||
                   divStyle.MsTransform   ||
                   divStyle.WebkitTransform ||
                   divStyle.OTransform    ||
                   divStyle.transform,
        transition: divStyle.MozTransition ||
                    divStyle.MsTransition   ||
                    divStyle.WebkitTransition ||
                    divStyle.OTransition    ||
                    divStyle.transition
    };
}());

En exploitant les noms d'événements et les propriétés d'animation appropriés, cette approche permet de redéclencher Animations CSS compatibles avec tous les navigateurs.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn