在javascript中为Each循环的元素添加类名无法正常工作

Question

我正在使用javascript forEach方法循环遍历图像，并为其添加类名以进行动画处理。基本上，我希望图像在每次迭代之间一个接一个地设置动画，但这是同时向元素添加classNames，因此它们同时设置所有动画。我做错了什么？以及如何修复？

const images = document.querySelectorAll(".image");
images.forEach((image) => {
setTimeout(function () {
image.classList.add("move-image-left");
console.log(image);
}, 100);

Answer 1

images.forEach((image, index)，正如您所看到的，我在setTimeout函数中使用了索引，然后在时间上相乘。

• 这是代码

images.forEach((image, index) => {
setTimeout(function() {
image.classList.add("move-image-left");
}, index * 1000); // this will wait times of current element index
});

有关更多信息，请在StackOverflow上查看此答案。

const images = document.querySelectorAll(".image");
images.forEach((image, index) => {
setTimeout(function() {
image.classList.add("move-image-left");
}, index * 1000);
});

.image {
display: inilne-block;
height: 50px;
width: 100px;
margin-bottom: 10px;
object-fit: cover;
overflow: hidden;
transition: .5s;
}
.move-image-left {
transform: translateX(50px);
}

<div class="image">
<img src="https://images.unsplash.com/photo-1659203540215-bb0044083ff5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" />
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1659203540215-bb0044083ff5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" />
</div>
<div class="image">
<img src="https://images.unsplash.com/photo-1659203540215-bb0044083ff5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" />
</div>