CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapanimationtwitter-bootstrap-4
cholox
cholox

Reputation: 13

Bootstrap animation doesn't work as expected

You can find bootstrap animations here. I want to remove the animation after it finished. On the website you can find a trigger which should help with that. The problem is, that when I click the button, the classes get deleted immediately.

<button class="btn btn-primary" onclick="foo(this)">Press here</button>
<script>
function foo(element){
    $(element).addClass("animated shake");
    $(element).on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', $(element).removeClass("animated shake"));
    }
</script>

Upvotes: 0

Views: 842

Answers (1)

Dario
Dario

Reputation: 640

Just add a Timeout for the duration of your animation, to wait until the animaton is finished:

function foo(element){
    $(element).addClass("animated shake");
    var duration = $(element).css("animation-duration"); 
    setTimeout(function() { 
        $(element).removeClass("animated shake"); 
    }, duration);
}

Upvotes: 1

Related Questions