¿Detecta qué animación CSS acaba de terminar en JavaScript?

¿Cómo se puede detectar qué animación CSS acaba de terminar en JavaScript?¿Detecta qué animación CSS acaba de terminar en JavaScript?

La última necesidad es volver a activar una animación CSS. Debido a nuestra jerarquía de HTML, preferimos no verificar la clase del elemento, sino tomar medidas solo cuando termina una animación en particular. Si tiene un método que permite volver a activar una animación sin eliminar/agregar una clase, háganoslo saber.

De lo contrario ... nuestro código:

page.find('.button.letter').on('webkitAnimationEnd', function() { 
     $(this).removeClass('tap_animation'); 

     console.log('Hi: ' + this.style.webkitAnimationName); 

     if (!write_mode()) { 
      do_write(this); 
     } 
    });

this.style.webkitAnimationName siempre devuelve la cadena vacía.

¿Estamos haciendo algo mal?

Necesitamos el código para navegadores WebKit, específicamente Mobile Safari.

Gracias!

Fuente

2012-09-19 Crashalot

Si desea una animación en bucle, eso ya está soportado en CSS3. Si eso no es lo que quieres, ¿podrías elaborar un poco más? – Shmiddty

Para no reproducir una animación, simplemente vuelva a disparar sin eliminar/agregar una clase. Activamos una animación agregando una clase y luego, un tiempo indeterminado más tarde, necesitamos reactivarla. Si eliminar/agregar una clase es el único método, entonces tenemos que resolver la pregunta que se incluye aquí. – Crashalot

De jQuery se puede acceder al objeto originalEvent, y, a partir de ahí, el animationName propiedad:

$('body').on('webkitAnimationEnd', function(e){ 
    var animName = e.originalEvent.animationName; 
    console.log(animName); 
});

(Webkit-only) JS Fiddle demo.

A partir de ahí, simplemente use un if para verificar cuál es el nombre de la animación/era (tiempo pasado, supongo, dado que terminó).

El actualizado anteriormente, para dar, posiblemente, una mejor ilustración:

$('div').on('webkitAnimationEnd', function(e){ 
    var animName = e.originalEvent.animationName; 
    if (animName == 'bgAnim') { 
     alert('the ' + animName + ' animation has finished'); 
    } 
});

(Webkit-only) JS Fiddle demo.

Esta demo utiliza el código HTML siguiente:

<div><span>text</span></div>

y CSS:

@-webkit-keyframes bgAnim { 
    0%, 100% { 
     color: #000; 
     background-color: #f00; 
    } 
    50% { 
     color: #fff; 
     background-color: #0f0; 
    } 
} 

@-webkit-keyframes fontSize { 
    0%, 100% { 
     font-size: 100%; 
    } 
    50% { 
     font-size: 300%; 
    } 
} 

div { 
    font-weight: bold; 
    -webkit-animation: bgAnim; 
    -webkit-animation-duration: 2s; 
    -webkit-animation-iteration-count: 2; 
} 

span { 
    font-size: 100%; 
    font-weight: bold; 
    -webkit-animation: fontSize; 
    -webkit-animation-duration: 4s; 
    -webkit-animation-iteration-count: 1; 
}

Fuente

2012-09-19 16:26:02

Eres demasiado increíble, pero tú y tus 51.4k puntos ya lo saben. :) ¿No sabes otra forma de volver a activar animaciones CSS (después de algunas acciones del usuario) sin agregar/eliminar clases, verdad? – Crashalot

¡Gracias! En cuanto a reiniciar una animación, no; Creo (aunque todavía no he explorado el tema) que agregar/quitar/alternar clases es el único camino a seguir, desafortunadamente. –

Gracias, David. Tenemos una pregunta relacionada, y esperamos que conozca también la respuesta: http://stackoverflow.com/questions/12499335/bind-to-custom-css-animation-end-event-with-jquery-or -javascript Si tienes la oportunidad, nos encantaría tus pensamientos! – Crashalot

Un detector de eventos para webkitAnimationEnd debería funcionar. Algo a lo largo de las líneas de:

$object.addEventListener('webkitAnimationEnd', function(){ 
     console.log('End Detected'); 
    }, false);

Fuente

2012-09-19 16:16:03 AJak

Gracias, pero ¿cómo se puede detectar * qué * animación finalizó? Múltiples animaciones se ejecutan contra el mismo objeto. – Crashalot

¿Detecta qué animación CSS acaba de terminar en JavaScript?

Respuesta

Cuestiones relacionadas