如何使用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>

Answer 2

在这里，我点击按钮即可添加课程.height。

.height {
  height: 100%
}

$(document).ready(function() {
  $("button").click(function() {
    $(".container").toggleClass("height")
  });
});

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

.height {
  height: 100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

在这里，我点击按钮会切换div的显示

$(document).ready(function() {
  $("button").click(function() {
    $(".container").toggle()
  });
});

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

.height {
  height: 100%
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>