javascript - JavaScript:一次一个地重复地为列表项设置动画
问题描述
我正在尝试一次重复地按顺序为列表项设置动画。我有一个包含一些列表项的列表。我想要做的是使用 javascript 一次为每个列表项设置一个动画。当动画下一个项目时,我还必须从上一个项目中删除动画。问题是我不习惯 setIntervals 或 setTimeout 函数。我是 javascript 的初学者。
const ThumbnailSlider = document.querySelectorAll('.thumbnail-slider li');
setInterval(() => {
ThumbnailSlider.forEach( (item, i) => {
const ms = (i+1) * 2000;
setTimeout(() => {
item.classList.add('active')
}, ms);
});
}, 2000);
.thumbnail-slider {
position: relative;
height: 100%;
width: 100%;
}
.thumbnail-slider li {
position: relative;
height: 100%;
width: 100%;
}
.thumbnail-slider li.active {
background: cyan;
}
<ul class="thumbnail-slider">
<li>list item one</li>
<li>list item two</li>
</ul>
我知道这个 javascript 是不够的,因为我没有在任何地方使用 .classList.remove 删除活动类。我也知道切换。
解决方案
您可以尝试以下方法:-
setTimeout
一个人就足够了。我们将为当前元素添加新类并删除前一个元素的类。
const ThumbnailSlider = document.querySelectorAll('.thumbnail-slider li');
let previousItem;
function animate(){
ThumbnailSlider.forEach( (item, i) => {
const ms = (i+1) * 2000;
setTimeout(() => {
previousItem?.classList.remove('active');
item.classList.add('active')
previousItem = item;
if(i===ThumbnailSlider.length-1){
animate();
}
}, ms);
});
}
animate();
.thumbnail-slider {
position: relative;
height: 100%;
width: 100%;
}
.thumbnail-slider li {
position: relative;
height: 100%;
width: 100%;
}
.thumbnail-slider li.active {
background: cyan;
}
<ul class="thumbnail-slider">
<li>list item one</li>
<li>list item two</li>
<li>list item third</li>
<li>list item fourth</li>
<li>list item fifth</li>
</ul>
推荐阅读
- django - 如何使用 url 中的参数从 django 的数据库中获取数据?
- firebase - 允许在 Realtime Firebase 数据库中写入一个孩子
- java - 如何在给定此代码的情况下打印广度优先横向的结果(Java)
- c# - Xamarin.Forms 微调器 TimePicker
- scala - 在每次列传递以进行转换时迭代数据框
- c# - ASP.Net Core 中的异步 PartialView
- powershell - Powershell IE 自动化 - 无法为文本区域设置值
- html - 如何在 Elementor 中删除小部件和布局子项之间的间隙/空间?
- python - ValueError:无法将字符串转换为浮点数:'42,999'(Python)
- java - Hibernate Multitenancy,每个租户使用不同的表