如何设置超时以使事物列表单独动画化?

Question

window.addEventListener('scroll', (e) => {
let scrollPos = window.pageYOffset;
if(scrollPos > 1171){
for(let i=0; i<artists.length; i++){
artists[i].classList.add('showing');
}
}
});

我知道我应该使用固定的超时，我无法让它为我的生活工作，任何帮助将不胜感激

Answer 1

由于您使用的是let，i的作用域将保留在for循环本身。这意味着一个简单的setTimeout就可以了。但是，如果您使用的是var对于i，您需要将setTimeout调用包装在闭包中，以确保i范围限定在循环中。

使用var(老派(

for (var i = 0; i < boxes.length; i++) {
// We have to close over i because we have no block scope
(function(index) {     
setTimeout(function() {
boxes[index].classList.add('showing')
}, (index * 500)) // .5s, 1s, etc.     
})(i)
}

使用let

const boxes = document.querySelectorAll('.box');
for (let i = 0; i < boxes.length; i++) {
// i is scoped to the block
setTimeout(function() {
boxes[i].classList.add("showing");
}, i * 500); // .5s, 1s, etc.
}

@keyframes fadein {
to {
opacity: 1;
}
}
.box { 
opacity: 0;
background-color: red; 
display: inline-block;
width: 100px;
height: 100px;
}
.box.showing { animation: 1s fadein linear forwards; }

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>