¿Se une al evento final de animación CSS personalizado con jQuery o JavaScript?

Question

Tenemos múltiples animaciones contra el mismo objeto. Necesitamos tomar diferentes acciones cuando finalice cada una de estas animaciones.

En este momento, nos vinculamos al evento webkitAnimationEnd, y utilizamos una instrucción gnarly if/then para manejar cada animación de manera diferente.

¿Hay alguna manera de crear esencialmente eventos personalizados webkitAnimationEnd, lo que nos permite activar un controlador de eventos específico cuando termina una animación específica? Por ejemplo, encienda manejador1 cuando animación1 termina y encienda manejador2 cuando animación2 termina.

Estamos creando navegadores Webkit, específicamente Mobile Safari.

Gracias!

Answer 1

Para un simple evento de disparo, se puede pasar una función para el método de jQuery trigger() y utilizar el valor devuelto de esta función para llamar a un gatillo de un evento específico (que puede ser escuchada por:

function animEndTrigger(e) { 
    if (!e) { 
     return false; 
    } 
    else { 
     var animName = e.originalEvent.animationName; 
     return animName + 'FunctionTrigger'; 
    } 
} 

$('body').on('bgAnimFunctionTrigger fontSizeFunctionTrigger', function(e){ 
    console.log(e); 
}); 

$('div').on('webkitAnimationEnd', function(e) { 
    $(this).trigger(animEndTrigger(e)); 
}); 

.

JS Fiddle demo

Usted puede, por supuesto, también usar la función llamada a cualquiera de desencadenar el evento en sí o evaluar los parámetros pasados ​​para determinar si volver o no a un evento en todo:

un MET hod para evaluar para un evento en particular para desencadenar es utilizar un objeto:

var animations = { 
    'bgAnim': 'aParticularEvent' 
}; 

function animEndTrigger(e) { 
    if (!e) { 
     return false; 
    } 
    else { 
     var animName = e.originalEvent.animationName; 
     return animations[animName] ? animations[animName] : false; 
    } 
} 

$('body').on('aParticularEvent', function(e) { 
    console.log(e); 
}); 

$('div').on('webkitAnimationEnd', function(e) { 
    $(this).trigger(animEndTrigger(e)); 
});​ 

JS Fiddle demo.

Aunque, en este caso, el return false debe modificarse para no proporcionar el error Uncaught TypeError: Object false has no method 'indexOf' (que aún no me he molestado en dar cuenta).

las siguientes causas la llamada función (animEndTrigger()) para directamente trigger() el evento personalizado (que requiere un elemento en el que para unir el método trigger()) y también evita el Uncaught TypeError arriba:

var animations = { 
    'bgAnim': 'aParticularEvent' 
}; 

function animEndTrigger(e, el) { 
    if (!e || !el) { 
     return false; 
    } 
    else { 
     var animName = e.originalEvent.animationName; 
     if (animations[animName]) { 
      $(el).trigger(animations[animName]); 
     } 
    } 
} 

$('body').on('aParticularEvent', function(e) { 
    console.log(e); 
}); 

$('div').on('webkitAnimationEnd', function(e) { 
    animEndTrigger(e, this); 
});​ 

JS Fiddle demo.

Por supuesto, todavía está utilizando efectivamente un if para realizar una evaluación, por lo que no puedo estar particularmente seguro de que esto sea más ordenado que su propia solución ya implementada.