javascript - 仅在第二次操作后添加 animate.css 动画工作

Question

我从 animate.css 添加动画 https://github.com/daneden/animate.css

到一个选定的元素，从下拉框中选择一种动画。

动画类将成功添加到元素。

我是这样做的

    <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());
...

添加动画后没有任何反应。动画不会立即开始。

我必须在事件元素外部单击(这个元素已经获得了新的动画类)，然后首先开始动画。

是什么原因造成的，我如何在将新动画添加到元素时正确启动动画？

非常感谢。

Answer 1

使用如下代码，<option value=""></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>