JavaScript: определить, когда заканчивается анимация CSS3

Question

У меня есть простая форма с ajax, и мне нужно, когда все с формами выполняется, как в req.done JavaScript будет ждать CSS3-анимацию и покажет # vyhra после завершения CSS3-анимации,

Я пробовал в нижней части кода, но он не работает.

(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() нельзя применять более одного раза (поэтому в этом случае это не имеет значения).