在加载javascript时一个接一个地设置div高度的动画

我已经设法让我的动画开始工作，现在我希望其余的动画在每个

div

height动画及其引发的问题之后稍微延迟一点。我尝试过使用

getElementsByClassName

，但没有成功

到目前为止，我已经在codepen中发布了我的进度

• 尝试使用

  GetElementsByCassName

• 尝试使用

  .container

  div

window.onload=函数（）{
let box=document.getElementById（'box'）
box.style.height=“100vh”；
}
框1
框2
框3
框1

您可以使用第一个

框的
transitionend
事件来启动
框2的转换：

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

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

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

如果您想在第一个动画完成之前开始第二个动画，您可以使用
setTimeout
功能，并具有所需的延迟：

window.onload=函数（）{
const-box=document.getElementById（'box'）；
设置超时（（）=>{
document.getElementById（'box2'）.style.height=“100vh”；
}, 200);
box.style.height=“100vh”；
}
试试这个

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

window.onload=函数（）{
var-box=document.getElementsByClassName（“box”）；
对于（变量i=0；i
就在这里。一个用于逐个设置每个长方体动画的代码

注意，我必须先将节点列表转换为数组，然后反转数组。这是为了能够从数组中弹出元素，并使用数组的长度终止递归函数
animateBoxes（）

我使用
setTimeout（）
函数一次执行递归函数1秒。您可以根据需要修改时间参数

此方法的主要优点是，它可以自动为任意数量的框设置动画


window.onload=function（）{
let box=[].slice.call（document.queryselectoral（“.box”））.reverse（）；
动画盒（盒）；
函数animateBoxes（框）{
如果（方框长度）{
setTimeout（函数（）{
box.pop（）.style.height=“100vh”；
动画盒（盒）；
}, 1000);
}
}
}
*{
保证金：0；
填充：0；
框大小：边框框；
}
.集装箱{
宽度：100%；
高度：100vh；
背景：绿色；
显示：网格；
网格模板列：重复（4，1fr）；
}
#盒子，盒子2，盒子3，盒子4{
宽度：100%；
身高：0；
位置：相对位置；
排名：0；
过渡：1s；
}
#盒子{
背景：红色；
}
#框2{
背景：紫色；
}
#框3{
背景：橙色；
}
#方框4{
背景：黄色；
}

框1
框2
框3
方框4
太棒了！非常感谢，这真的很有效。是否有任何方法可以手动设置延迟，以便动画开始得更快一些？