javascript - How to check if the css animation is done in my case? -

i trying detect if css animation ended in app.

i have following

  animation.prototype.nextstage = function(){        this.ball.show().addclass('stage' + this.stage); //start animation        this.ball.on('animationend mozanimationend webkitanimationend oanimationend msanimationend',function(){             //when animation ended, animation item itself….         })     }     animation.prototype.isended = function(){      // sure how check if animation ended outside of animation obj.     }    function main(){     this.ball = new animation ();  }  main.prototype.checkanimation = function(){     this.ball.nextstage();     if(this.ball.isended){       //do stuff not part of animation items..     } } 

i not sure how check if ball animation done in main object. can me it? lot!

this way add new event handler each time call nextstage.

it'll better use like:

function animation(ball, completecallback) {     var self = this;     this.isended = false;     this.ball = ball;     this.ball.on('animationend mozanimationend webkitanimationend oanimationend msanimationend', function () {         self.isended = true;         if (typeof completecallback === 'function') {             completecallback();         }      }); } animation.prototype.nextstage = function () {     this.ball.show().addclass('stage' + this.stage); //start animation     this.isended = false; }   function main() {     this.ball = new animation(dom_element, this.completecallback); }  main.prototype.completecallback = function () {    alert('animation done'); };  main.prototype.checkanimation = function () {     if (this.ball.isended) {         //do stuff not part of animation items..     } } 

call this.ball.nextstage(); when want animate.