javascript - append 和 addClass 动画失败

Question

$('#clickMe').click(function() {
  $('#ticketsDemosss').append($('<li>').text('my li goes here')).addClass('fadeIn');
});

<link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="viewbranchcontact-2">
  <ul id="ticketsDemosss" class="tickets">
    <!-- add LI here -->
  </ul>
</dl>

<button id="clickMe">Click Me</button>

知道为什么上面的代码不起作用吗？我使用 animate.css 库尝试在插入时淡入我的 li 但它有轻弹。

https://jsfiddle.net/to9fs7t4/

Answer 1

您还需要添加 animated 类。

阅读docs .

$('#clickMe').click(function() {
  $('#ticketsDemosss').append($('<li>').text('my li goes here').addClass('animated fadeIn'));
});

<link href="http://s.mlcdn.co/animate.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<dl id="viewbranchcontact-2">
  <ul id="ticketsDemosss" class="tickets">
    <!-- add LI here -->
  </ul>
</dl>

<button id="clickMe">Click Me</button>