Javascript 在动画结束之前阻止回调运行

我试图创建一个带有回调的函数，该回调将在最后执行。 基本上，我是在一个div中添加一个css类来设置它的动画，并希望在动画结束时删除该div。我就是这样做的：

this.animate = function(cssClass, callback) {
        $(div).addClass(cssClass);
            callback();

    }

调用此函数时：

this.animate('animated', function () {
     $(div).remove();
}

但是，我注意到在动画启动之前，div被移除了

编辑：以下是css类：

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -webkit-transform: translateY(-20px);
    }
}
@-moz-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -moz-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -moz-transform: translateY(-20px);
    }
}
@-o-keyframes fadeOutUp {
    0% {
        opacity: 1;
        -o-transform: translateY(0);
    }

    100% {
        opacity: 0;
        -o-transform: translateY(-20px);
    }
}
@keyframes fadeOutUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

.animated.fadeOutUp {
    -webkit-animation-name: fadeOutUp;
    -moz-animation-name: fadeOutUp;
    -o-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
    -webkit-animation-duration: 0.25s;
    -moz-animation-duration: 0.25s;
    -o-animation-duration: 0.25s;
    animation-duration: 0.25s;
}

编辑：（解决方案） 我使用

one（）

方法解决了这个问题，如下所示：

 $(div).one('webkitAnimationEnd oanimationend msAnimationEnd animationend',   
    function(e) {

    // code to execute after animation ends

    $(this).remove();
    });

---

希望它能帮助其他面临同样问题的人。

我建议您使用jQuery动画函数，它有一个

complete

事件回调，您可以在动画完成时连接。在动画函数上传递一组CSS规则

this.animate = function(cssRules, callback) {
  $(div).animate(cssRules, 1000, "linear", function() {
    console.log('animation completed');
    callback(); //executes your callback here
  });
}

cssRules

是在参数

cssClass

中定义的规则；它看起来像：

{ 
  height: 200,
  width: 400,
  opacity: 0.5
}

从简单的事情开始；只更改一个css规则，例如

字体大小

或

高度

。也许有一种方法可以在css类的基础上制作动画，谷歌，你永远不知道

请参阅本页末尾的文档（关于完整回调）：

希望这有帮助

---

R.

您使用的是哪种动画？过渡？Css动画？@abdelk但是什么样的动画？你能把相关的CSS代码应用到动画类吗？1。快速脏法：设置超时；2.听

animationend

event@A.Wolff检查编辑我要检查一下，我想它更干净了。