请告诉我如何使容器根据子元素的高度平滑地增加和减少高度
我的代码可以在没有动画的情况下工作
setTimeout(() => {
document.getElementById("page1").style = "display:none";
document.getElementById("page2").style = "display:block";
}, 5000);
setTimeout(() => {
document.getElementById("page1").style = "display:none";
document.getElementById("page2").style = "display:block";
}, 15000);
.container {
width: 50vmin;
background: green;
transition: all 5s ease;
display: block;
}
#page1 {
width: 25vmin;
height: 50vmin;
background: red;
display: block;
}
#page2 {
width: 25vmin;
height: 10vmin;
background: black;
display: none;
}
<div class="container">
<div id="page1"></div>
<div id="page2"></div>
</div>
每当您应用过渡时，请将过渡动画应用到您想要观看的元素并使其动画平滑。
另请注意：而不是更新display none and block，如你想观看高度动画，更新样式height style.
这是一个工作示例：
setTimeout(() => {
document.getElementById("page1").style = "height:20vmin";
document.getElementById("page2").style = "height:20vmin";
}, 5000);
.container {
width: 50vmin;
background: green;
display: block;
}
#page1 {
width: 25vmin;
height: 50vmin;
background: red;
display: block;
transition: all 5s ease;
}
#page2 {
width: 25vmin;
height: 10vmin;
background: black;
display: none;
transition: all 5s ease;
}
<div class="container">
<div id="page1"></div>
<div id="page2"></div>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
