Can you provide guidance on how to create a smooth transition in the height of a container based on the child element's height? Currently, my code does not include any animation effects.
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>