CODEWITHSUNDEEP
javascripthtmlcssreactjs
Vivaan4
Vivaan4

Reputation: 113

loop through elements and set CSS styling at same time

So I want to loop through elements with a class and then loop the individual element and gradually decrease the "left" css property.

let move = document.getElementsByClassName("move");
for (var i = 0; i < move.length; i++) {
  const left = move[i].getBoundingClientRect().left;
  const elementId = move[i].id;
  for (let j = left; j > -20; j--) {
    document.getElementById(elementId).style.left = j + "%";
    await new Promise(resolve => setTimeout(resolve, 20));
  }
}

However, I'm using "await" to delay so that it moves slowly and doesn't zip across the screen. I want it so that all the elements have their CSS left property decrease at the same time. But instead, because of the await, the first element increases its left property and when its left property reaches the end, only then the next element goes. Please advise

Upvotes: 2

Views: 1601

Answers (2)

Drew Reese
Drew Reese

Reputation: 202605

While I think it would be better to use pure CSS transitions/animations for this, you could use a while loop to iterate over the elements with the move class, subtracting 1% from their left value until they are completely off screen (right <= 0).

const start = async () => {
  const move = document.getElementsByClassName("move");

  const canMoveLeft = () => {
    const move = document.getElementsByClassName("move");
    for (let i = 0; i < move.length; i++) {
      if (move[i].getBoundingClientRect().right > 0) return true;
    }
    return false;
  };
  
  while (canMoveLeft()) {
    for (let i = 0; i < move.length; i++) {
      const { left, right } = move[i].getBoundingClientRect();
      if (right > 0) {
        const windowWidth = window.innerWidth;
        const leftVal = `${Math.round((left / windowWidth) * 100) - 1}%`;
        document.getElementById(move[i].id).style.left = leftVal;
      }
    }

    await new Promise((resolve) => setTimeout(resolve, 20));
  }
};

Edit loop-through-elements-and-set-css-styling-at-same-time

Upvotes: 1

Rabi jha
Rabi jha

Reputation: 328

From what I understood, you want to animate left property of elements with class "move".

If that's the case you can do:

1st:

add transition property in move class

.move {
 transition: left 2s;
}

2nd:

let move = document.getElementsByClassName("move");
for(let item of move) {
 item.style.left = "-20%";
}

Upvotes: 0

Related Questions