Question

我正在尝试使用将在最后执行的回调创建一个函数。基本上我将一个css类添加到一个div，它将动画它，并希望在动画终止时删除该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();
    });

希望它可以帮助其他人面对同样的问题。

Answer 1

我建议你使用一个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规则，例如font-size或height。可能有一种方法可以在css类的基础上制作动画，谷歌，你永远不会知道。

请参阅页面最后的文档（关于完整的回调）：http://api.jquery.com/animate/

希望这有帮助，

R上。

阻止回调运行直到动画结束

1 个答案: