Comment puis-je relancer les animations CSS WebKit avec JavaScript ?

Redéclencher les animations CSS WebKit avec JavaScript

En CSS, les animations sont des séquences limitées dans le temps qui peuvent être appliquées aux éléments à l'aide du @ -règle webkit-keyframes. Cependant, dans certains cas, il peut être nécessaire de redéclencher une animation sans utiliser de délais d'attente ou plusieurs animations.

Une solution consiste à utiliser l'événement animationEnd, qui est déclenché lorsqu'une animation se termine. Dans les navigateurs WebKit, cet événement est appelé webkitAnimationEnd. En attachant un écouteur d'événement à l'élément, il devient possible de réinitialiser l'animation une fois celle-ci terminée.

Réinitialisation basée sur les événements

En JavaScript Vanilla :

var element = document.getElementById('box');

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

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

Dans jQuery :

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

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

Cross-Browser Compatibilité

Pour la prise en charge de plusieurs navigateurs, une bibliothèque telle que les tests de transition CSS3 peut être utilisée. Il fournit un objet de support qui détecte diverses propriétés et événements CSS, y compris la prise en charge de l'animation :

var css3AnimationSupport = (function(){
    var div = document.createElement('div'),
        divStyle = div.style,
        support = {
            transition: ...
            transform: ...
            animation: ...
        };
}());

En utilisant cet objet de support, il est possible de détecter la propriété et l'événement d'animation pour chaque navigateur, permettant une gestion cohérente d'animations CSS sur plusieurs plateformes.

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!