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.
Comments
Post a Comment