JavaScript：检测CSS3动画何时结束

我用ajax制作了一个简单的表单，我需要在表单的所有事情都完成时，比如在req.doneJavaScript将等待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））

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

因此，您需要收听所有这些节目，请参见以下内容：

因此，如果

.koleso-active

启动CSS转换，您可以查看文档以获得转换结束，如下所示：

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

工作小提琴：

所以你的应该是这样的：

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

---

你可能想考虑防止它不止一次被触发，虽然<代码>。（）（代码）>不能应用不止一次（所以在这种情况下，无关紧要）。