如何使用 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>

如何使用 Animate.css 将渲染顺序添加到动态加载的元素

How to add sequence of rendering to dynamically loaded elements with Animate.css

jquery

animation

animate.css