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

Question

我试图让一个 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;
 }

http://jsfiddle.net/3hmvy278/

Answer 1

试一试。我没有使用任何依赖项，只有一些普通的 JavaScript 和 CSS 转换。

document.querySelector(".myButton").addEventListener("click", () => {
  document.querySelector(".container").classList.toggle("start");
});

.container {
  background: lightblue;
  width: 100%;
  height: 0;
  overflow: hidden;
  transition: 1s height ease-in-out;
}

.container.start {
  height: 100vh;
}

/* Ignore */

body {
  margin: 0;
}

.myButton {
  position: absolute;
  top: 0;
  left: 0;
  font-size: 100%;
}

<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 class="myButton">Toggle</button>