如何使用高度为html动画元素HTML:0px至高度:自动(CSS)

Question

我试图通过将鼠标移动到我的div上来生成动画，我希望将height增加到height，以使其内容充分显示。效果必须来自从零到内容的total height(height:auto)的height(height:0px)

这是我的代码：

div{
	height: 0px;
	transition: all 0.5s ease;
	overflow: hidden;
	border:1px solid red;
}
div:hover{
	height:auto;
}

<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat sunt tempora, cupiditate quia labore nam quas consequuntur ducimus nemo tempore dolorem beatae voluptatem unde excepturi, error eius commodi laudantium quisquam?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque quo nisi, eos impedit voluptate, molestiae repudiandae ullam deserunt magnam sed aliquam eveniet id illo qui nemo vero quis officiis, veritatis.
</div>

https://jsfiddle.net/df973ktr/

Answer 1

div {
  max-height: 0px;
  transition: all 0.5s ease;
  overflow: hidden;
  border: 1px solid red;
}
div:hover {
  max-height: 900px;
}

<div>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat sunt tempora, cupiditate quia labore nam quas consequuntur ducimus nemo tempore dolorem beatae voluptatem unde excepturi, error eius commodi laudantium quisquam?Lorem ipsum dolor sit amet,
  consectetur adipisicing elit. Doloremque quo nisi, eos impedit voluptate, molestiae repudiandae ullam deserunt magnam sed aliquam eveniet id illo qui nemo vero quis officiis, veritatis.
</div>