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

Question 1

¿Hay alguna forma 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 hay forma de hacerlo en css3.

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

Question 2

Sí hay. La devolución de llamada es un evento, por lo que debe agregar un detector de eventos para detectarlo. Este es un ejemplo con jQuery:

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

O js puro:

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

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

Question 3

Una forma fácil de hacer una devolución de llamada que también maneja sus transiciones CSS3 / compatibilidades de navegador sería el complemento 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

Answer 1

92

¿Hay alguna forma 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 hay forma de hacerlo en css3.

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

javascript css frontend alterar
fuente

posible duplicado de la devolución

givanse

Si desea realizar una acción CSS simple, por ejemplo, ocultar el elemento después de su transición, tal vez no necesite una devolución de llamada y, en cambio, puede resolver su problema con el fotograma clave de la animación.

Madmadi

Answer 2

posible duplicado de la devolución

givanse

Answer 3

Si desea realizar una acción CSS simple, por ejemplo, ocultar el elemento después de su transición, tal vez no necesite una devolución de llamada y, en cambio, puede resolver su problema con el fotograma clave de la animación.

Madmadi

Answer 4

131

Sí hay. La devolución de llamada es un evento, por lo que debe agregar un detector de eventos para detectarlo. Este es un ejemplo con jQuery:

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

O js puro:

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

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

metodofaccion
fuente

3

Para IE10 es 'MSAnimationEnd' (consulte msdn.microsoft.com/en-us/ie/hh272902#_CSSAnimations )

Martin Wittemann

6

Es transitionend, no animationend.

13

@MichaelJones no, eso es para las transiciones css3. la pregunta era sobre animaciones.

joshvermaire

4

@MartinWittemann IE10 final ahora usa animationend msdn.microsoft.com/en-us/library/ie/… . @Husky, el código funciona en Chrome y FF 14, vea el violín actualizado jsfiddle.net/W3y7h

methodofaction

1

Duplicado de stackoverflow.com/questions/9255279/… que tiene una solución más completa

vanthome

Answer 5

3