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

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?

javascript css frontend

— alterare
fonte

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/

— metodo di azione
fonte

Per IE10 è "MSAnimationEnd" (vedere msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations )

— Martin Wittemann

Non lo transitionendè animationend.

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

— joshvermaire

@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

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

— vanthome

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

— ROFLwTIME
fonte

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