CODEWITHSUNDEEP
javascriptcssanimation
RainerS
RainerS

Reputation: 521

add animate.css animation work only after second action

i add a animation from the animate.css https://github.com/daneden/animate.css

to a selected element, on selecting a kind of animation from drop down box.

The animation classes will added successful to the element.

I do it in this way

    <select name="animation"><option value="zoomIn">zoomIn</option></select>

    <div class="addtothis">mycontent here we add the animation</div>

on change the selectbox i fire a function, in this is this part embeded
("this" is from selectbox)
...
    $('.addtothis').addClass('animated').val();
    $('.addtothis').addClass($(this).find(":checked").val());
...

After adding the animation nothing happens. the animation wont start immediately.

I must click outside the active element (this who has get the new animation classes), then first the animation starts.

What caused that and how i can start the animation right i add the new animation to the element?

Thanks a lot.

Upvotes: 0

Views: 52

Answers (1)

לבני מלכה
לבני מלכה

Reputation: 16251

Use code as below, with <option value=""></option> (empty option)

$('select').on('change', function() {
  $('.addtothis').addClass('animated').val();
  $('.addtothis').addClass($(this).find(":checked").val());
}); 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css">
  
<select name="animation">
  <option value=""></option>
  <option value="zoomIn">zoomIn</option>
  <option value="zoomOut">zoomOut</option>
  <option value="bounceOutLeft">bounceOutLeft</option>
</select>
<div class="addtothis">mycontent here we add the animation</div>

Upvotes: 1

Related Questions