如何在不使用max-height的情况下，用纯CSS实现height从0到auto的过渡

这是很多开发者都碰到过的问题，而且解决方案并不容易找到。不过确实存在一种可行方案！下面是具体实现步骤：

步骤1：创建基础Grid元素 #

首先需要创建一个grid元素，并添加如下CSS样式：

<div class="grid-element">
</div>

<style>
.grid-element {
  display: grid;
  grid-template-rows: 0fr;
  transition-property: grid-template-rows;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}
</style>

步骤2：添加内容容器 #

接下来在grid-element内部添加content-wrapper，用于包裹需要展开的内容：

<div class="grid-element">
  <div class="content-wrapper">
    <!-- 这里放入需要下滑展开的内容 -->
  </div>
</div>

<style>
.grid-element {
  display: grid;
  grid-template-rows: 0fr;
  transition-property: grid-template-rows;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}

.content-wrapper {
 overflow: hidden;
}
</style>

步骤3：实现展开/收起交互 #

此时内容仍处于隐藏状态，要实现下滑展开效果，需要添加条件类slidedown-active，并设置CSS样式grid-template-rows: 1fr;。下面示例通过按钮触发类的添加/移除，你也可以根据需求用其他方式触发，content-wrapper中可以放入任意内容：

<button onclick="toggleSlidedown()">切换展开/收起</button>

<div class="grid-element">
  <div class="content-wrapper">
    <!-- 这里放入需要下滑展开的内容 -->
    <p>hello world!</p>
  </div>
</div>

<style>
.grid-element {
  display: grid;
  grid-template-rows: 0fr;
  transition-property: grid-template-rows;
  transition-duration: 300ms;
  transition-timing-function: ease-in-out;
}

.content-wrapper {
 overflow: hidden;
 background-color: red;
}

.slidedown-active {
  grid-template-rows: 1fr;
}
</style>

<script>
function toggleSlidedown() {
  const element = document.querySelector(".grid-element");

  if (element.classList.contains('slidedown-active')) {
    element.classList.remove("slidedown-active");
  } else {
    element.classList.add("slidedown-active");
  }
}
</script>

内容的提问来源于stack exchange，提问作者Marnix Elling