Comment puis-je redéclencher dynamiquement les animations CSS WebKit ?

Redéclencher dynamiquement les animations CSS WebKit

Lorsque vous travaillez avec des animations CSS optimisées par WebKit, il peut y avoir des cas où vous devrez re- déclencher une animation après son exécution initiale. Pour y parvenir sans dépendre de délais d'attente ou de plusieurs animations, nous pouvons exploiter un événement intégré : "webkitAnimationEnd".

Cet événement se déclenche lorsque l'animation est terminée, nous permettant de la réinitialiser et de la redémarrer par programme. Voici comment :

En JavaScript simple :

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

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

document.getElementById('button').onclick = function(){
    element.style.webkitAnimationName = 'shake';
    // Prevent default browser behavior here if needed.
};

En jQuery :

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

$('#button').click(function(){
    $element.css('webkitAnimationName', 'shake');
    // Prevent default browser behavior here if needed.
});

Cette approche fournit un moyen propre et efficace de redéclencher les animations CSS à la demande. Il élimine le besoin de délais d'attente complexes ou d'animations supplémentaires, garantissant des transitions fluides et transparentes.

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!