检测通过animationName触发的AnimationEnd

Question

我有几个链接到一个div的CSS3动画,但我只想在最后一个动画结束时使用一个函数.

我已经使用了animationEnd事件,因此我可以触发所述函数,但正如我所说,我只想让它在最后一个动画上运行.

有没有办法通过检查已触发animationEnd事件的动画的名称来检测动画？

因此允许我使用if语句来挑出最后一个动画.

Answer 1

定义函数时需要该参数.这些都应该起作用;

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');
     }
}

Answer 2

我不知道为什么......但我能抓住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;
}