如何使用Animate.css向动态加载的元素添加渲染序列

Question

我正在使用Animate.css将一些动态元素添加到页面中，但是如您所见，它们都一起显示在页面上。您能否让我知道如何通过将项目逐页显示而不是一次加载来利用渲染？

$("button").on("click", function() {
  for (i = 0; i < 100; i++) {
    $("#result").append('<div class="box animated fadeInDown"></div>')
  }
});

.box {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: gold;
  float: left;
  margin: 8px;
}

<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.2/animate.min.css" integrity="sha256-PHcOkPmOshsMBC+vtJdVr5Mwb7r0LkSVJPlPrp/IMpU=" crossorigin="anonymous" />
<button>Append Data</button>
<div id="result"></div>

Answer 1

您在这里与setTimeout：

const delay = 50; //milliseconds
$("button").on("click", function() {
  for (i = 0; i < 100; i++) {
    setTimeout(() => $("#result").append('<div class="box animated fadeInDown"></div>'), i * delay)
  }
});

.box {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: gold;
  float: left;
  margin: 8px;
}

<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.2/animate.min.css" integrity="sha256-PHcOkPmOshsMBC+vtJdVr5Mwb7r0LkSVJPlPrp/IMpU=" crossorigin="anonymous" />
<button>Append Data</button>
<div id="result"></div>