视口中包含WOW.js的项目的动画

Question

我有一个包含在视口中的项目列表，这意味着当我加载页面时，它们全部一次都被动画化了。但我希望他们一个接一个地动画。

$(function(){
  new WOW().init();
})

这是我的笔 https://codepen.io/kaleem78/pen/oMEeqZ

如何为另一个视口中的项目设置动画？

Answer 1

为标签添加延迟属性：

<ul>
  <li class='wow fadeInDown' data-wow-delay="0.5s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="1s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="1.5s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="2s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="2.5s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="3s">Item</li>
  <li class='wow fadeInDown' data-wow-delay="3.5s">Item</li>
</ul>