Detect being animated and end of animation state for animate.css with jQuery -
this question has answer here:
i using animate.css animate few blocks on web page.
<a href="#" class="clicktoanimate">click animate</a> <div class="div-to-animate">     content... </div>   $('.clicktoanimate').click(function(direction){     $('.div-to-animate').addclass('animated fadein'); });   so animation.
but want tasks when being animated , when animation done.
so, check if being animated, used following condition
if ($('.div-to-animate').hasclass('animated')) {    //  }   which fine not cases. because animated class not being removed after transition.
so, guess piece of puzzle need solve is: how remove animated class after animation completed.
you can listen animationend event , remove class when fires:
$(".div-to-animate").on("animationend", function() {     $(this).removeclass("animated"); });   example:
$(".div-to-animate").on("animationend", function() {    console.log("done");    $(this).removeclass("animated");  }).addclass("animated fadein");  .animated {    color: green;  }  <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet"/>  <div class="div-to-animate">this div, it's green while being animated</div>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
Comments
Post a Comment