jquery remove class after css animation played?

Question

I have the css code:

body.start{-webkit-animation:srcb ease-in .4s 1;}

and just play once when entered the website

but the problem

Answer 1

$("#mydiv").removeClass("start",
    function() {
        alert("do something");
    });

Answer 2

You can bind to the transitionend event (to all of them, actually):

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).removeClass("start");
    }
);

If you want to implement a delay, you can queue() the class removal operation:

$("body").on(
    "transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd",
    function() {
        $(this).delay(1000).queue(function() {  // Wait for 1 second.
            $(this).removeClass("start").dequeue();
        });
    }
);

Note: on() only exists since jQuery 1.7, if you are using an older release you will have to use bind() instead for the code above to work.

Answer 3

Try

webkitAnimationEnd oanimationend msAnimationEnd animationend

instead of

transitionend MSTransitionEnd webkitTransitionEnd oTransitionEnd

This worked for me.

Answer 4

What worked for me was to always remove the animation class at the start of the event listener, run some small code in-between and then add the animation class again and it worked. It will now always trigger the animation. In my case I wanted a wobble animation to be triggered if the password was wrong. Not sure of your reasoning. I wanted the animation removed so the animation would always trigger again, even if they repeatedly hit submit and it was wrong.

$j('#submitLogin').on('click',function(){    
    if(true){
       //login
    }else{
       $j('.lockIcon').removeClass('wobble-hor-top');
       $j(this).prev().prev().addClass('invalid');
       $j('.loadIconKey').hide();
       $j('.lockIcon').addClass('wobble-hor-top');
    }
});

Answer 5

Here is the code:

var div = document.querySelector('div');

function callback() {
    div.classList.remove('start'); // or modify div.className
}

div.addEventListener("webkitAnimationEnd", callback, false);

Check this live example on jsbin.

Please notice, that your animation and my solution work only in webkit-based browsers. In production environment you should take into consideration other browsers and mandatory provide prefix-free solution.

Answer 6

Another way perhaps?

$(window).load(function(){
    setTimeout(function(){
        $('body.start').removeClass('start')
    }, 4000);
});