javascript - 如何检查我的 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();。