Detect which AnimationEnd has fired via animationName

Question

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.

Um, you answered your own question: Check the name of the animation tha triggered [the `animationEnd` event](http://www.w3.org/TR/css3-animations/#animation-events). — Raymond Chen, Jul 23 '12 at 19:42
Argh! I couldn't feel more stupid. Must be this summer heat. Thankyou Ray — Damon, Jul 23 '12 at 20:40
This works fine in webkit but doesn't work in Firefox. Getting the "event isnt defined" error. — Damon, Jul 24 '12 at 14:49
Um, it's the name of the parameter passed to your handler. Did you declare your handler correctly? — Raymond Chen, Jul 24 '12 at 15:10
Is the error message still "event isn't defined" for all three versions? Since your third version did define it. — Raymond Chen, Jul 24 '12 at 16:31

score 8 · Accepted Answer · edited Dec 04 '17 at 10:29

8

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

edited Dec 04 '17 at 10:29

Mike Eng

1,593
4
34
53

answered Jul 24 '12 at 16:38

Matt Clegg

584
1
4
16

I dont think you can bind multiple conditions like that. Does this help: http://jsfiddle.net/HeX5E/ – Matt Clegg Jul 25 '12 at 13:35

score 5 · Answer 2 · answered Jan 07 '13 at 14:14

5

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

answered Jan 07 '13 at 14:14

Almog Baku

810
1
9
22

1

I think if you're using jQuery, then the event is all jQuery-ified, so you have to access the original event to find the animationName property. – Eric Johnson Dec 15 '15 at 17:16

Detect which AnimationEnd has fired via animationName

2 Answers2