JavaScript:检测 CSS3 动画何时结束

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
});

工作 fiddle :https://jsfiddle.net/2fgnmxr8/1/

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

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

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