Comment puis-je relancer de manière fiable les animations CSS WebKit à l'aide de 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!