jQuery -detecting if CSS animation ended

Question

Just bootstrapping a quick modal script and I hit the wall.

Testing css animations and all works fine. I can open a modal from a link but when I try to open same modal again straight after for some reason

.one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
     function(e){
        modalBg.removeClass('flex fadeOut animated');
        $(this).off(e);

     });

is fired instantly... When I try to click different link every time it works fine. I did try to null modalBg variable and it does the trick but console return the error that removeClass is not defined. So for some reason modalBg.removeClass('flex fadeOut animated'); is still fired.

Here is JSBin

Here is the whole code:

$( document ).ready(function() {

$( ".modal-link" ).on( "click", function() {

        attribute = $(this).attr('href');
        attribute = attribute.replace('#','');
        console.log(attribute);

        $('.modal-bg[data-modal='+ attribute +']').addClass( "flex animated fadeIn" );
        $('.modal-bg[data-modal='+ attribute +'] .modal').addClass( "animated fadeInDown" );
});

$('.modal-close').on('click', function() {
    modalBg = $(this).closest('.modal-bg');
    modalBg.removeClass('fadeIn');
    modalBg.addClass('fadeOut');
    modalBg.one("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd",
     function(e){
        modalBg.removeClass('flex fadeOut animated');
        $(this).off(e);

     });
   });
});

I feel like you need to use the jQuery animate function to take advantage of the on finish animate handler. — Mistergreen
– Mistergreen, Commented Mar 5, 2016 at 17:44
@Mistergreen, that's not an issue, it is working fine with keyframe css animations. I can't figure out why event is triggered when I click on the same link twice in the row... Interesting enough when I click link third time it's working again :) I don't want use jQuery animations they quite slow compering to css. — CyberFountain
– CyberFountain, Commented Mar 5, 2016 at 17:50

Mistergreen · Accepted Answer · 2016-03-05 18:11:04Z

2

Replace your off(e) with

$(this).off("animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd");

answered Mar 5, 2016 at 18:11

Mistergreen

1,0521 gold badge9 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

jQuery -detecting if CSS 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