animate div height one after the other onload javascript

I have managed to get the beginning of my animation working and now I want the rest to animate with a slight delay after each div height animation and its causing problems. I've tried using getElementsByClassName and that hasn't worked.

I've posted my progress so far here in codepen.

Tried using getElementsByClassName
Tried using the .container div.

<html>

<head>
  <script>
    window.onload = function() {
      let box = document.getElementById('box')
      box.style.height = "100vh";
    }
  </script>
</head>

<body>
  <div class="container" id="container">
    <div class="box" id="box">
      box1
    </div>
    <div class="box" id="box2">
      box2
    </div>
    <div class="box" id="box3">
      box3
    </div>
    <div class="box" id="box4">
      box1
    </div>
  </div>

</body>

</html>

I want each individual element to animate down with delays set to each one.

You can use transitionend event of the first box, to start transition of box2:

window.onload = function () {
  const box = document.getElementById('box');

  box.addEventListener("transitionend", () => {
    document.getElementById('box2').style.height = "100vh";
  }, {once: true});

  box.style.height = "100vh";
}

In case you want to start 2nd animation before 1st one finished you could use setTimeout function with desired delay:

window.onload = function () {
  const box = document.getElementById('box');

  setTimeout(() => {
    document.getElementById('box2').style.height = "100vh";
  }, 200);

  box.style.height = "100vh";
}

Try this..

window.onload = function () {
  var box = document.getElementsByClassName("box");
  for(var i = 0; i < box.length; i++)
  {
     box[i].style.height = "100vh";
  }
}

There you have it. A code to animate each of your boxes one after the other.

Notice I had to convert your node list to an array first and then reverse the array. This is in order to be able to pop elements from the array and use the lenght of the array to terminate the recursive function animateBoxes().

I used the setTimeout() function to execute the recursive function 1 second at a time. You can modify the time parameter to your need.

The major advantage of this method is that it can automatically animate any number of boxes.

window.onload = function () { 
    let boxes = [].slice.call(document.querySelectorAll(".box")).reverse();
    animateBoxes(boxes);

    function animateBoxes(boxes) {
        if(boxes.length) {
            setTimeout(function() {
                boxes.pop().style.height = "100vh";
                animateBoxes(boxes);
            }, 1000);
        }
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.container {
    width: 100%;
    height: 100vh;
    background: green;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

#box, #box2, #box3, #box4 {
    width: 100%;
    height: 0;
    position: relative;
    top: 0;
    transition: 1s;
}

#box {
    background: red;
}

#box2 {
    background: purple;
}

#box3 {
    background: orange;
}

#box4 {
    background: yellow;
}

<div class="container" id="container"> 
    <div class="box" id="box"> box1 </div> 
    <div class="box" id="box2"> box2 </div> 
    <div class="box" id="box3"> box3 </div> 
    <div class="box" id="box4"> box4 </div> 
</div>

来源：https://stackoverflow.com/questions/57646084/animate-div-height-one-after-the-other-onload-javascript

标签

javascript

animation

onload