CODEWITHSUNDEEP
javascriptcssdetectcss-animationskeyframe
Damon
Damon

Reputation: 115

Detect which AnimationEnd has fired via animationName

I have several CSS3 animations linked to one div, but I only want a function to be callad a the end of the last animation.

I have used the animationEnd event so that I can trigger said function but as I said I only want the it to run on the last animation.

Is there a way to detect with animation has ended by checking the name of the animation that has triggered the animationEnd event?

thus allowing me to use a if statement to single out the last animation.

Upvotes: 9

Views: 10643

Answers (2)

Matt Clegg
Matt Clegg

Reputation: 590

The parameter is required when you define the function. Either of these should work;

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

Or,

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

Upvotes: 8

Almog Baku
Almog Baku

Reputation: 800

I don't know why... but I can catch the the animationName only by e.originalEvent.animationName

so the best option is:

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

Upvotes: 5

Related Questions