我已经成功地开始了我的动画工作，现在我希望其余的动画在每个动画之后稍微延迟div高度动画及其引起的问题。我尝试过使用getElementsByClassName但这并没有奏效。
我已经发布了到目前为止的进展here https://codepen.io/matt_bart1/pen/pozeNLJ在代码笔中。
- 尝试使用
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>
我希望每个单独的元素都可以通过设置延迟来动画化。
您可以使用transitionend第一个事件box，开始转换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";
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
