仅在第二次操作后才添加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>