Javascript 如何使用CSS动画将div从屏幕的顶部移动到底部？

我试图让一个div从页面的顶部扩展到底部。当用户单击按钮，动画开始时，div将被隐藏（高度为0%），直到填充其内容。我试着这样做，但似乎都不管用

CSS和HTML

<div class="container">
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
    <h1>Lorem Ipsum</h1>
</div>    

<button type="button" id="expand">Expand</button>

.container{
    background:lightblue;
    top: 0px; 
    left: 0px; 
    width: 100%; 
    display: block; 
    height:0px;
    overflow:hidden;
 }

乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
扩大
.集装箱{
背景：浅蓝色；
顶部：0px；
左：0px；
宽度：100%；
显示：块；
高度：0px；
溢出：隐藏；
}

---

单击按钮，我在这里添加class

。height

.height {
  height: 100%
}

$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
$（“.container”）.toggleClass（“高度”）
});
});
.container{
背景：浅蓝色；
顶部：0px；
左：0px；
宽度：100%；
显示：块；
高度：0px；
溢出：隐藏；
}
.身高{
身高：100%
}

乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
展开
尝试一下。我没有使用依赖项，只有一些普通的
JavaScript
和
CSS
转换


document.querySelector（“.myButton”）.addEventListener（“单击”，（）=>{
document.querySelector（“.container”）.classList.toggle（“开始”）；
});
.container{
背景：浅蓝色；
宽度：100%；
身高：0；
溢出：隐藏；
过渡：1s高度缓进缓出；
}
.container.start{
高度：100vh；
}
/*忽略*/
身体{
保证金：0；
}
.我的按钮{
位置：绝对位置；
排名：0；
左：0；
字体大小：100%；
}

乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
乱数假文
切换
也发布JS代码，还有你将要使用的动画我是学习者我没有用JS编写任何代码请指导我这样做在这里发布你的努力代码。我认为这样做不是在上课，你不能用它来做你的家庭作业。你应该自己做这个的可能复制品很好，但我想设置类似div的切换功能，那么只有它对我有用，@AbhiRam我为你做了调整。我们不能让div的高度随内容而扩展吗？@AbhiRam看一看。我将
height
更改为
max height
。