Question

我的Ajax表单很简单，当表单中的所有内容都完成后，例如 req.done ，我需要JavaScript将等待CSS3动画并在CSS3之后显示 #vyhra 动画结束。

我在代码的底部尝试过，但是没有用。

(function($) {

var form = $('#email-form');

form.on('submit', function(event) {
    event.preventDefault();

    var req = $.ajax({
        url: form.attr('action'),
        type: 'POST',
        data: form.serialize()
    });

    req.done(function(data) {
        console.log( data );
        $('.koleso').toggleClass('koleso-active');
        form.hide();

        if($('.koleso-active').addEventListener("animationend", listener, false)) {
            $('#vyhra').show();
        }

    });

});

}（jQuery））;

Answer 1

浏览器经常为不同的动作触发不同的事件。

因此，您需要聆听所有内容，请参见以下内容：

因此，如果.koleso-active启动CSS转换，则可以监视文档的转换结束，如下所示：

$(document).on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(event) {
    // Do stuff
});

正在工作的小提琴：https://jsfiddle.net/2fgnmxr8/1/

所以你的应该看起来像这样：

$(document).on("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", function(event) {
    $('#vyhra').show();
}

尽管.show()不能被多次应用（因此在这种情况下没有关系），您可能要考虑防止它被多次触发。

JavaScript：检测CSS3动画何时结束

1 个答案: