在另一个onload javascript上动画div高度 [英] animate div height one after the other onload javascript
问题描述
我设法使动画开始工作，现在我希望其余动画在每个div高度动画及其引起的问题之后稍作延迟进行动画处理.我尝试使用getElementsByClassName，但没有用.
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.
到目前为止，我已经在Codepen中的此处发布了我的进度.
I've posted my progress so far here in codepen.
- 尝试使用
getElementsByClassName - 尝试使用
.containerdiv.
- Tried using
getElementsByClassName - Tried using the
.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.
推荐答案
您可以使用第一个box的transitionend事件来开始box2的转换:
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";
}
如果要在第一个动画完成之前开始第二个动画，可以使用具有所需延迟的setTimeout函数:
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";
}
这篇关于在另一个onload javascript上动画div高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
