C'è un callback al completamento di un'animazione CSS3?


92

C'è un modo per implementare una funzione di callback in caso di animazione CSS3? In caso di animazione Javascript è possibile ma non trovare alcun modo per farlo in css3.

Un modo che ho potuto vedere è eseguire il callback dopo la durata dell'animazione, ma ciò non garantisce che verrà sempre chiamato subito dopo la fine dell'animazione. Dipenderà dalla coda dell'interfaccia utente del browser. Voglio un metodo più robusto. Qualche indizio?


possibile duplicato di Callback su transizione CSS
givanse

se vuoi fare una semplice azione CSS, ad esempio, nascondere l'elemento dopo la sua transizione, forse non hai bisogno di un callback e invece, puoi risolvere il tuo problema con il keyframe dell'animazione.
Madmadi

Risposte:


131

Si C'è. Il callback è un evento, quindi è necessario aggiungere un listener di eventi per catturarlo. Questo è un esempio con jQuery:

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

O puro js:

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

Demo dal vivo: http://jsfiddle.net/W3y7h/


3

6
Non lo transitionendè animationend.

13
@MichaelJones no, questo è per le transizioni css3. la domanda riguardava le animazioni.
joshvermaire

4
@MartinWittemann IE10 final ora utilizza animationend msdn.microsoft.com/en-us/library/ie/… . @Husky il codice funziona in Chrome e FF 14, guarda il violino aggiornato jsfiddle.net/W3y7h
methodofaction

1
Duplicato di stackoverflow.com/questions/9255279/… che ha una soluzione più completa
vanthome

3

Un modo semplice per eseguire una richiamata che gestisce anche le transizioni CSS3 / compatibilità del browser sarebbe jQuery Transit Plugin . Esempio:

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

JS Fiddle Demo


1
Punto bonus per la condivisione delle specifiche API con jQuery animate, ma sfruttando comunque la fluidità resa hardware delle animazioni CSS. Abbiamo appena sostituito jQuery animate praticamente ovunque con questo.
logan
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.