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

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

检测通过animationName触发的AnimationEnd

2 个答案: