Binden an benutzerdefinierte CSS-Animation-Endereignis mit jQuery oder JavaScript?

Question

Wir haben mehrere Animationen gegen das gleiche Objekt. Wir müssen verschiedene Aktionen ausführen, wenn jede dieser Animationen endet.

Im Moment binden wir uns an das webkitAnimationEnd Ereignis und verwenden eine gnarly if/then Anweisung, um jede Animation anders zu behandeln.

Gibt es eine Möglichkeit, im Wesentlichen benutzerdefinierte webkitAnimationEnd Ereignisse zu erstellen, die es uns ermöglichen, einen bestimmten Event-Handler auszulösen, wenn eine bestimmte Animation endet? Zum Beispiel Feuer handler1 wenn animation1 Ende und Feuer handler2 wenn animation2 Ende.

Wir bauen für Webkit-Browser, insbesondere Mobile Safari.

Danke!

Answer 1

Für einen einfachen Ereignis-Trigger, können Sie eine Funktion jQuery trigger() Methode übergeben und den Rückgabewert dieser Funktion verwenden, um einen Trigger ein bestimmtes Ereignis zu nennen (die dann hören-für werden können:

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

Sie können, natürlich, verwenden auch die aufgerufene Funktion entweder auslösen das Ereignis selbst oder die übergebenen Parameter beurteilen, ob oder nicht, um zu bestimmen überhaupt ein Ereignis zurück:

One erfüllt auszulösen ist, ein Objekt zu verwenden hod für ein bestimmtes Ereignis zu bewerten:

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.

Obwohl in diesem Fall die return false sollte geändert werden, um nicht den Fehler Uncaught TypeError: Object false has no method 'indexOf' (die ich noch nicht belästigt, um zu berücksichtigen) zu bieten.

folgende Ursachen die gerufene Funktions (animEndTrigger()) direkt trigger() das benutzerdefinierte Ereignis (die ein Element, auf dem die erfordert trigger() Verfahren zu binden), und vermeidet auch die Uncaught TypeError oben:

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.

Natürlich sind Sie immer noch, effektiv, mit einer if, um eine Bewertung durchzuführen, so dass ich nicht besonders sicher sein kann, dass dies ist ordentlicher als Ihre eigene bereits implementierte Lösung.