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

Question 1

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 trouvant aucun moyen de le faire en css3.

Une façon que j'ai pu 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?

Question 2

Oui il y a. Le rappel est un événement, vous devez donc ajouter un écouteur d'événements 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/

Question 3

Un moyen simple pour vous de faire un rappel qui gère également vos transitions CSS3 / compatibilités de navigateur serait le plugin jQuery Transit . Exemple:

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

Démo JS Fiddle

Answer 1

91

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 trouvant aucun moyen de le faire en css3.

Une façon que j'ai pu 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?

javascript css frontend modifier
la source

duplication possible de Callback sur la transition CSS

givanse

si vous voulez faire une action CSS simple, par exemple, cacher l'élément après sa transition, peut-être que vous n'avez pas besoin d'un rappel et à la place, vous pouvez résoudre votre problème avec l'image clé de l'animation.

Madmadi

Answer 2

duplication possible de Callback sur la transition CSS

givanse

Answer 3

si vous voulez faire une action CSS simple, par exemple, cacher l'élément après sa transition, peut-être que vous n'avez pas besoin d'un rappel et à la place, vous pouvez résoudre votre problème avec l'image clé de l'animation.

Madmadi

Answer 4

130

Oui il y a. Le rappel est un événement, vous devez donc ajouter un écouteur d'événements 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/

méthode d'action
la source

3

Pour IE10, c'est «MSAnimationEnd» (voir msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations )

Martin Wittemann

6

Ça ne l'est transitionendpas animationend.

13

@MichaelJones non, c'est pour les transitions css3. la question portait sur les animations.

joshvermaire

4

@MartinWittemann IE10 final utilise désormais animationend msdn.microsoft.com/en-us/library/ie/… . @Husky le code fonctionne dans Chrome et FF 14, voir le violon mis à jour jsfiddle.net/W3y7h

methodofaction

1

Duplicata de stackoverflow.com/questions/9255279/… qui a une solution plus complète

vanthome

Answer 5

3