如何通过CSS将高度从0过渡到auto？

内容来自 DOC https://q.houxu6.top/?s=如何通过CSS将高度从0过渡到auto？

你可以尝试使用max-height属性来实现这个效果，而不是使用height属性。这样，在悬停时，<ul>的高度会逐渐增加，而不会出现突然跳跃的情况。以下是修改后的CSS代码：

#child0 {
  max-height: 0;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: max-height 1s ease;
  -webkit-transition: max-height 1s ease;
  -o-transition: max-height 1s ease;
  transition: max-height 1s ease;
}
#parent0:hover #child0 {
  max-height: auto;
}
#child40 {
  max-height: 40px;
  overflow: hidden;
  background-color: #dedede;
  -moz-transition: max-height 1s ease;
  -webkit-transition: max-height 1s ease;
  -o-transition: max-height 1s ease;
  transition: max-height 1s ease;
}
#parent40:hover #child40 {
  max-height: auto;
}
h1 {
  font-weight: bold;
}

这样，当你悬停在两个不同的<div>元素上时，它们的高度将以平滑的方式过渡，而不是突然跳跃。