检测通过 animationName 触发了哪个 AnimationEnd

Question

我有几个 CSS3 动画链接到一个 div，但我只想在最后一个动画结束时调用一个函数。

我使用了 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

我不知道为什么...但我只能通过 e.originalEvent.animationName

捕捉到animationName

所以最好的选择是：

function getAnimationName(e) {
  if(e.animationName != undefined) return e.animationName;
  if(e.originalEvent.animationName != undefined) return e.originalEvent.animationName;
  else return undefined;
}