Adding classname to elements forEach loop in javascript not working properly-CodePudding

I'm using the javascript forEach method to loop through images and add classnames to it that animates. Basically I want the images to animate one by one with delays between each iteration but it's adding classNames to the elements all at once therefore they are animating all at the same time. What am I doing wrong? and how to fix it?

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

CodePudding user response：

images.forEach((image, index) as you can see I have used index and then multiply in time inside of setTimeout function.

Here is that code,

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

For more information, please go through this answer on 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 >
  <img src="https://images.unsplash.com/photo-1659203540215-bb0044083ff5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" />
</div>
<div >
  <img src="https://images.unsplash.com/photo-1659203540215-bb0044083ff5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" />
</div>
<div >
  <img src="https://images.unsplash.com/photo-1659203540215-bb0044083ff5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" />
</div>