一个接一个的动画 div 高度 onload javascript
[英]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.
我已经设法让我的动画开始工作，现在我希望其余的动画在每个div高度动画及其引起的问题之后稍微延迟。 I've tried using getElementsByClassName and that hasn't worked.我试过使用getElementsByClassName但没有奏效。
I've posted my progress so far here in codepen.我已为我的进步至今这里的codepen。
- Tried using
getElementsByClassName尝试使用getElementsByClassName - Tried using the
.containerdiv.尝试使用.containerdiv。
<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.我希望每个单独的元素都设置为每个元素的延迟动画。
3 个解决方案
解决方案1
1 2019-08-25 12:52:51
You can use transitionend event of the first box , to start transition of box2 :您可以使用第一个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";
}
In case you want to start 2nd animation before 1st one finished you could use setTimeout function with desired delay:如果您想在第一个动画完成之前开始第二个动画，您可以使用具有所需延迟的setTimeout函数：
window.onload = function () {
const box = document.getElementById('box');
setTimeout(() => {
document.getElementById('box2').style.height = "100vh";
}, 200);
box.style.height = "100vh";
}
解决方案2
0 2019-08-25 13:01:41
Try this..尝试这个..
window.onload = function () {
var box = document.getElementsByClassName("box");
for(var i = 0; i < box.length; i++)
{
box[i].style.height = "100vh";
}
}
解决方案3
0 2019-08-25 15:53:13
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() .这是为了能够从数组中弹出元素并使用数组的长度来终止递归函数animateBoxes() 。
I used the setTimeout() function to execute the recursive function 1 second at a time.我使用setTimeout()函数一次执行递归函数 1 秒。 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.