javascript - 如何使用 JavaScript 为列表项设置动画以一一显示?
问题描述
我需要为以下列表项设置动画(淡入)以一一出现。作为本网站的右侧抽屉。
<ul>
<li class="fade-item">Item 01</li>
<li class="fade-item">Item 02</li>
<li class="fade-item">Item 03</li>
<li class="fade-item">Item 04</li>
<li class="fade-item">Item 05</li>
</ul>
这是 JavaScript 代码。
function fadeItems() {
var items = document.getElementsByClassName("fade-item");
for (var i = 0; i < items.length; i++) {
setTimeout(function() {
items[i].classList.add("fadein");
}, 3000);
}
}
CSS样式在这里。
.fade-item {
transition: .2s all ease-in-out;
opacity: 0;
}
.fade-item .fadein {
animation: fadeIn 0.9s 1;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
执行该函数时,会出现以下错误。
未捕获的类型错误:无法读取未定义的属性“classList”
我需要这个来使用 JavaScript 进行编码。
解决方案
未捕获的类型错误:无法读取未定义的属性“classList”
因为当您使用时setTimeout(handler, delay)
,处理程序在其他上下文中被调用。
如果要逐个淡入项目,则应为每个项目使用不同的延迟。
如果您想在添加类后淡入项目fadein
,您的 css 应该是
.fade-item {
transition: .2s all ease-in-out;
opacity: 0;
}
.fadein {
animation: fadeIn 0.9s 1;
animation-fill-mode: forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
推荐阅读
- android - 颤振的条形码扫描仪结果
- javascript - 在 React Router Dom 中使用 history.push 登录/注销的空白页面
- python - Changestream MongoDB 和 Flask Python
- flutter - 预期的“字体”是地图列表
- reactjs - 如何重新组织此 JSON 以在 Google React Charts 烛台格式中工作?
- c# - C# asp.net web api将字节保存为pdf
- rest - 有没有办法在 Fluentd 中使用过滤器参数从 rest api 端点提取数据
- c# - Visual Studio Windows 窗体设计器不允许移动 SplitContainer 的垂直边框
- javascript - 添加到我的 index.html 文件中的 Webpack Babel 脚本需要是 src="/main.js" 但是是 src="main.js"。如何正确配置它?
- python - 运行 Flask 应用程序后,Celery 任务会在后台运行两次,为什么?