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>

仅在第二次操作后才添加animate.css动画作品

1 个答案: