Как проверить, выполнена ли анимация css в моем случае?

Question

Я пытаюсь определить, закончилась ли моя анимация css в моем приложении.

У меня есть что-то вроде следующего

animation.prototype.nextStage = function(){ 
     this.ball.show().addClass('stage' + this.stage); //start the animation 
     this.ball.on('animationend mozanimationend webkitAnimationEnd oAnimationEnd msanimationend',function(){ 
      //when animation is ended, do something for animation item itself…. 
     }) 
    } 

    animation.prototype.isEnded = function(){ 
    // now sure how to check if the animation is ended outside of the animation obj. 
    } 


function main(){ 
    this.ball = new animation(); 
} 

main.prototype.checkAnimation = function(){ 
    this.ball.nextStage(); 
    if(this.ball.isEnded){ 
     //do stuff for something that is not part of animation items.. 
    } 
} 

Я не знаю, как проверить, если мой шар анимация делается в моем главном объекте. Может ли кто-нибудь мне помочь? Большое спасибо!

Answer 1

Таким образом вы добавляете новый обработчик событий каждый раз, когда вы вызываете nextStage.

Это будет лучше использовать что-то вроде:

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 the animation 
    this.isEnded = false; 
} 


function main() { 
    this.ball = new animation(DOM_ELEMENT, this.completeCallback); 
} 

main.prototype.completeCallback = function() { 
    alert('ANIMATION IS DONE'); 
}; 

main.prototype.checkAnimation = function() { 
    if (this.ball.isEnded) { 
     //do stuff for something that is not part of animation items.. 
    } 
} 

this.ball.nextStage(); вызова, когда вы хотите анимировать.

Answer 2

Если вы делаете что-то асинхронное, вы можете использовать обещание или обратный вызов. Проходя мимо обратного вызова, как это может работать для вас:

animation.prototype.nextStage = function (callback) { 
    this.ball.show().addClass('stage' + this.stage); //start the animation 
    this.ball.on('animationend mozanimationend webkitAnimationEnd oAnimationEnd msanimationend', function() { 
     if (callback) callback(); 
    }) 
}  

main.prototype.checkAnimation = function() { 
    this.ball.nextStage(function() { 
     //do stuff for something that is not part of animation items.. 
    }); 
} 

А вот возможная реализация обещание:

animation.prototype.nextStage = function() { 
    var def = $.Deferred(); 
    this.ball.show().addClass('stage' + this.stage); //start the animation 
    this.ball.on('animationend mozanimationend webkitAnimationEnd oAnimationEnd msanimationend', function() { 
     def.resolve(true); 
    }); 
    return def.promise(); 
} 

main.prototype.checkAnimation = function() { 
    var promise = this.ball.nextStage(); 

    promise.done(function() { 
     //do stuff for something that is not part of animation items.. 
    }); 
}