为什么在添加动画 css class 时不起作用

Question

添加class后，会暂时消失。不知道为什么

var i = 0;
function hello () {
document.getElementById('demo').innerHTML += "<li id= '"+ i +"'>hello'"   + i +"'</li>";
$('#' + i).addClass('animated bounceInUp');
    if (i < 5) {
        setTimeout(hello, 5000);
    }
    i++;
}
hello();

Answer 1

1.You 需要使用 jQuery 或 javasript 语法 purely.Try 不要混用。

2.Add class 到第一行代码本身并删除第二行以使您的代码更短。

按如下操作：-

var i=0;
function hello () {
  $('#demo').append("<li id= '"+ i +"' class='animated bounceInUp'>hello'" + i +"'</li>");
  if (i < 5) {
    setTimeout(hello, 5000);
  }
  i++;
}
hello();

工作片段：-

var i=0;
function hello () {
  $('#demo').append("<li id= '"+ i +"' class='animated bounceInUp'>hello'" + i +"'</li>");
  if (i < 5) {
     setTimeout(hello, 5000);
  }
  i++;
}
hello();

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id = "demo" style="position: fixed;bottom:0" ></ul>

工作 fiddle:- https://jsfiddle.net/Louuopk1/

为什么在添加动画 css class 时不起作用

Why does not work when an animate css class is added

javascript

jquery

html

css

animate.css