9

1 つの div にリンクされた複数の CSS3 アニメーションがありますが、関数を最後のアニメーションの最後に呼び出したいだけです。

上記の関数をトリガーできるように animationEnd イベントを使用しましたが、前述のように、最後のアニメーションでのみ実行したいのです。

animationEnd イベントをトリガーしたアニメーションの名前を確認して、アニメーションが終了したことを検出する方法はありますか?

したがって、if ステートメントを使用して最後のアニメーションを選び出すことができます。

4

2 に答える 2

8

関数を定義する場合、パラメーターは必須です。これらのいずれかが機能するはずです。

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

または、

var $element = $('.eye').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function(e){
     if (e.originalEvent.animationName === "three") {
         console.log('the event happened');
     }
}
于 2012-07-24T16:38:13.963 に答える
5

理由はわかりませんがanimationName…e.originalEvent.animationName

したがって、最良のオプションは次のとおりです。

function getAnimationName(e) {
  if(e.animationName != undefined) return e.animationName;
  if(e.originalEvent.animationName != undefined) return e.originalEvent.animationName;
  else return undefined;
}
于 2013-01-07T14:14:42.350 に答える