一个接一个地动画 div 高度 onload javascript答案

【问题标题】：animate div height one after the other onload javascript一个接一个地动画 div 高度 onload javascript
【发布时间】：2019-08-25 12:39:16
【问题描述】：

我已经设法让我的动画开始工作，现在我希望在每个 div 高度动画及其引起的问题之后，其余的动画稍有延迟。我试过使用getElementsByClassName，但没有奏效。

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

尝试使用getElementsByClassName
尝试使用.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>

我希望每个单独的元素都设置有延迟的动画。

【问题讨论】：

标签： javascript animation onload

【解决方案1】：

您可以使用第一个box 的transitionend 事件来开始box2 的转换：

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 = function () {
  const box = document.getElementById('box');

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

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

【讨论】：

太棒了！非常感谢你，这真的很好。有什么办法可以手动设置延迟，让动画开始快一点？

【解决方案2】：

试试这个..

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

【讨论】：

【解决方案3】：

你有它。一个代码，一个接一个地为每个盒子设置动画。

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

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

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

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>

【讨论】：