html - 视口中带有 WOW.js 的项目的动画
问题描述
我有一个包含在视口中的项目列表,这意味着当我加载页面时,它们都同时被动画化。但我希望他们一个接一个地制作动画。
$(function(){
new WOW().init();
})
这是我的笔 https://codepen.io/kaleem78/pen/oMEeqZ
如何在视口中一个接一个地为项目设置动画?
解决方案
为您的标签添加延迟属性:
<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>
推荐阅读
- c++ - 使用 C++ 读取注册表并输出到控制台
- flutter - 将状态和事件与冻结的块颤动进行比较
- java - Android:如何列出父文件夹中的所有子文件夹?
- python - Pip3 版本未在 WSL 中更新
- android - 将BottomNavigation视图粘贴到底部,无论是否在android studio中滚动
- sql - PostgreSQL 获取以前的事件
- keras - 带有度量的 load_model
- javascript - 等待浏览器在 React 中渲染元素
- javascript - 从 jquer 中继器中输入字段上的名称获取单击项目的索引
- flutter - Flutter - '属性'设置'不能无条件访问,因为接收器可以是'null''