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


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?


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

Respuestas:


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/


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

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


1
Punto de bonificación por compartir las especificaciones de API con jQuery animate, pero aún aprovechando la fluidez de las animaciones CSS renderizadas por hardware. Simplemente reemplazamos jQuery animate prácticamente en todos los lugares con esto.
logan
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.