web-dev-qa-db-fra.com

Y a-t-il un rappel à la fin d'une animation CSS3?

Existe-t-il un moyen d'implémenter une fonction de rappel en cas d'animation CSS3? En cas d'animation Javascript, c'est possible mais ne trouve aucun moyen de le faire dans css3.

Une façon dont je pouvais voir est d'exécuter le rappel après la durée de l'animation, mais cela ne garantit pas qu'il sera toujours appelé juste après la fin de l'animation. Cela dépendra de la file d'attente de l'interface utilisateur du navigateur. Je veux une méthode plus robuste. Un indice?

javascriptcsscss3frontend
86
alter

Oui il y a. Le rappel est un événement, vous devez donc ajouter un écouteur d'événement pour l'attraper. Voici un exemple avec jQuery:

$("#Sun").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

Ou pur js:

element.addEventListener("webkitAnimationEnd", callfunction,false);
element.addEventListener("animationend", callfunction,false);
element.addEventListener("oanimationend", callfunction,false);

Démo en direct: http://jsfiddle.net/W3y7h/

124
methodofaction

jQuery Transit Plugin est un moyen facile pour vous de faire un rappel qui gère également vos transitions CSS3/compatibilités de navigateur. Exemple:

//Pulsing, moving element
$("#element").click( function () {
    $('#element').transition({ opacity: 0, x: '75%' }, function () { $(this).transition({ opacity: 1, x: '0%' }).trigger("click"); });
});

JS Fiddle Demo

3
ROFLwTIME