JavaScript: detect when CSS3 animation ended

Question

I have simple form with ajax and I need when all thing with forms is done like in req.done JavaScript will wait for CSS3 animation and show #vyhra after CSS3 animation ended.

I tried it in the bottom in code but it not working.

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

Did you try applying a setInterval event with the same (or maybe right after) amount of time from the animation ? — mattdaspy
– mattdaspy, Commented May 23, 2019 at 22:24

NickZA · Accepted Answer · 2019-05-23 22:38:09Z

1

Browsers often fire different events for different actions.

So you'll need to listen on all of them, see the following:

So if .koleso-active initiates a CSS transition, you can watch the document for a transition end, like so:

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

Working fiddle: https://jsfiddle.net/2fgnmxr8/1/

So yours should look something like this:

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

You may want to consider preventing it from being fired more than once, although .show() cannot be applied more than once (so in this case, wouldn't matter).

answered May 23, 2019 at 22:38

NickZA

3311 silver badge7 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript: detect when CSS3 animation ended

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related