secuencialmente - esperar que termine una funcion javascript

¿Hay una devolución de llamada al completar una animación CSS3?

Question

¿Hay alguna manera de implementar una función de devolución de llamada en caso de animación css3? En el caso de la animación de Javascript es posible, pero no encuentra la manera de hacerlo en css3.

Una forma en que pude ver es ejecutar una devolución de llamada después de la duración de la animación, pero eso no garantiza que se llame siempre justo después de que finalice la animación. Dependerá de la cola de UI del navegador. Quiero un método más robusto. ¿Cualquier pista?

Answer 1

Sí hay. La devolución de llamada es un evento, por lo que debe agregar un detector de eventos para capturarlo. Este es un ejemplo 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);

Demostración en vivo: http://jsfiddle.net/W3y7h/

Answer 2

Una forma sencilla de realizar una devolución de llamada que también maneje las transiciones de CSS3 / compatibilidades del navegador sería el plugin de jQuery Transit . Ejemplo:

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

Demostración de JS Fiddle