jQueryまたはJavaScriptを使用してカスタムCSSアニメーション終了イベントにバインドしますか？

Question

同じオブジェクトに対して複数のアニメーションがあります。これらのアニメーションのそれぞれが終了するとき、我々は異なる行動を取る必要があります。

今のところ、私たちはwebkitAnimationEndイベントにバインドし、gnarly if/thenステートメントを使って各アニメーションを異なる方法で処理します。

カスタムを基本的に作成する方法はありますか？webkitAnimationEndイベントは、特定のアニメーションが終了したときに特定のイベントハンドラを起動することを可能にしますか？例えば、ハンドラ1アニメーション1が終了し、火災ハンドラ2の場合アニメーション2が終了します。

私たちはWebkitブラウザ、特にMobile Safari用にビルドしています。

ありがとうございます！

Answer 1

単純なイベント・トリガーのために、あなたはjQueryのtrigger()メソッドに関数を渡すと、その後聞い-のためにすることができ、特定のイベント（トリガを呼び出すために、その関数の戻り値を使用することができます。

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あなたは、もちろん、イベント自体をトリガーするか、すべてのイベントを返却するかどうかを決定するために渡されたパラメータを評価するのいずれかに呼び出される関数を使用することができます

：。

一つMET

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：トリガする特定のイベントを評価するHODオブジェクトを使用することです。

この場合、return falseは、エラーUncaught TypeError: Object false has no method 'indexOf'（私がまだ気にしていない）を提供しないように変更する必要があります。

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：

以下と呼ばれる関数（animEndTrigger()）直接trigger()も（trigger()方法を結合するには要素を必要とする）およびカスタムイベントは、上記Uncaught TypeError回避するの原因となります。

もちろん、あなたは依然としてifを使って評価を行っていますので、これは既に実装されているソリューションよりも丁寧であるとは確信できません。