CODEWITHSUNDEEP
javascriptjquerycss
Nima Parsi
Nima Parsi

Reputation: 2110

addClass and then removeClass the same class

$(".CSS3-Animation").addClass('on');

This apples a set of CSS3 animation lines to the .CSS3-Animation. Now what I'm trying to do is to remove this class name right after it's loaded.

CSS:

.CSS3-Animation.on{
    animation:grow 0.5s both 0.3s
    }

@keyframes grow{
    0%{transform:scale(.8);opacity:0}
    100%{transform:scale(1);opacity:1}
}

I need to removeClass("on") after the animation is done so the following CSS will work:

.CSS3-Animation{
    transition-timing-function: ease-out;
    transition-duration: 250ms;
}
.CSS3-Animation:hover{
    transform: scale(1.02) translate(0,2px);
}

Obviously the below doesn't work:

        $(".CSS3-Animation").addClass('on');
        $(".CSS3-Animation").removeClass('on');

What are the ways to get around this?

Thanks in advance.

Upvotes: 0

Views: 455

Answers (2)

Jai
Jai

Reputation: 74738

You can use onwebkitanimationend like this:

$(".CSS3-Animation").addClass('on').on('animationend webkitAnimationEnd oAnimationEnd', function(){
    $(this).removeClass('on');
});

You can chain the event animationend webkitAnimationEnd oAnimationEnd after adding the class on.

Upvotes: 3

Milind Anantwar
Milind Anantwar

Reputation: 82231

You can use animationend event:

$(".CSS3-Animation").on('oanimationend animationend webkitAnimationEnd', function() { 
   $(".CSS3-Animation").removeClass('on');
});

using javascript:

 $(".CSS3-Animation")[0].addEventListener("webkitAnimationEnd", removeclass,false);
 $(".CSS3-Animation")[0].addEventListener("animationend", removeclass,false);
 $(".CSS3-Animation")[0].addEventListener("oanimationend", removeclass,false);

Docs

Upvotes: 2

Related Questions