代码之家 › 专栏 › 技术社区 › Damon

通过animationName检测哪个AnimationEnd已启动

keyframe css-animations detect css javascript

Damon · 技术社区 · 14 年前

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

我已经使用了animationEnd事件,这样我就可以触发所述函数,但正如我所说,我只希望它在最后一个动画上运行。

是否有方法通过检查触发animationEnd事件的动画的名称来检测动画是否已结束?

因此,我可以使用if语句来挑出最后一个动画。

2 回复 | 直到 8 年前

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

Almog Baku 13 年前

我不知道为什么。。。但我能赶上 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;
}

推荐文章