Detectar qué AnimationEnd se ha activado a través de animationName

Question

Tengo varias animaciones CSS3 vinculadas a un div, pero solo quiero que una función se invoque al final de la última animación.

He utilizado el evento animationEnd para que pueda activar dicha función, pero como dije, solo quiero que se ejecute en la última animación.

¿Hay alguna manera de detectar con la animación que haya finalizado marcando el nombre de la animación que activó el evento animationEnd?

lo que me permite utilizar una instrucción if para seleccionar la última animación.

Answer 1

El parámetro es obligatorio cuando define la función. Cualquiera de estos debería funcionar;

var $element = $('.eye').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function(event){ 
    if (event.originalEvent.animationName === "three") { 
     console.log('the event happened'); 
    } 
} 

O

var $element = $('.eye').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function(e){ 
    if (e.originalEvent.animationName === "three") { 
     console.log('the event happened'); 
    } 
} 

Answer 2

No sé por qué ... pero puedo coger el del animationName solamente por e.originalEvent.animationName

por lo que la mejor opción es:

function getAnimationName(e) { 
    if(e.animationName != undefined) return e.animationName; 
    if(e.originalEvent.animationName != undefined) return e.originalEvent.animationName; 
    else return undefined; 
}