6

同じオブジェクトに対して複数のアニメーションがあります。これらのアニメーションが終了するたびに、さまざまなアクションを実行する必要があります。

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

基本的にカスタムwebkitAnimationEndイベントを作成して、特定のアニメーションが終了したときに特定のイベントハンドラーを起動できるようにする方法はありますか？たとえば、animation1が終了するとhandler1を起動し、animation2が終了するとhandler2を起動します。

Webkitブラウザー、特にMobileSafari用に構築しています。

ありがとう！

4

1 に答える 1

4

単純なイベントトリガーの場合、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フィドルデモ。

もちろん、呼び出された関数を使用して、イベント自体をトリガーするか、渡されたパラメーターを評価して、イベントを返すかどうかを判断することもできます。

トリガーする特定のイベントを評価する1つの方法は、オブジェクトを使用することです。

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フィドルデモ。

ただし、この場合はreturn false、エラーが発生しないように変更する必要がありますUncaught TypeError: Object false has no method 'indexOf'（これについては、まだ説明していません）。

次の場合、呼び出された関数（ ）はカスタムイベント（メソッドをバインドする要素を必要としますanimEndTrigger()）を直接実行し、上記を回避します。trigger()trigger()Uncaught TypeError

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フィドルデモ。

もちろん、あなたはまだ効果的にif評価を実行しているので、これがあなた自身のすでに実装されているソリューションよりもきちんとしているとは特に確信できません。

于 2012-09-19T17:17:04.260 に答える