自动高度过渡动画问题

问题描述

在网页开发中，我们经常需要实现内容的展开/折叠效果，但使用传统的 CSS 过渡方式存在一个限制：无法为 height: auto 的元素添加过渡动画。当我们尝试从固定高度（如 height: 0）过渡到 height: auto 时，元素会直接跳变，没有平滑的动画效果。

解决方案

下面的代码展示了如何使用 CSS Grid 布局实现自动高度的平滑过渡动画：

.grid {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s;
  overflow: hidden;
}
.grid > div {
  min-height: 0;
}
.wrap:hover .grid {
  grid-template-rows: 1fr;
}

原理解析

这个技巧的工作原理基于 CSS Grid 的特性：

1. 使用 fr 单位：grid-template-rows: 0fr 将行高设置为 0 个分数单位，1fr 则表示占用所有可用空间
2. 内容溢出控制：overflow: hidden 确保内容在折叠状态下不可见
3. 最小高度重置：min-height: 0 覆盖了某些元素默认的最小高度，确保内容可以完全折叠
4. 过渡动画：transition: 0.3s 使行高的变化过程平滑进行

完整代码示例

<div class="wrap">
  <button class="toggle-btn">点击展开/折叠</button>
  <div class="grid">
    <div class="content">
      <p>
        这是一段可折叠的内容。当触发展开/折叠操作时，高度会平滑地过渡，而不是突然跳变。
      </p>
      <p>这个技术特别适用于手风琴组件、下拉菜单和可折叠面板等交互元素。</p>
      <img src="https://picsum.photos/600/300" alt="示例图片" />
    </div>
  </div>
</div>

<style>
  .wrap {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
  }

  .toggle-btn {
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 10px;
  }

  .toggle-btn:hover {
    background-color: #2980b9;
  }

  .grid {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease;
    overflow: hidden;
    border: 1px solid #ddd;
    border-radius: 4px;
  }

  .grid > div {
    min-height: 0;
    padding: 20px;
  }

  /* 点击按钮切换类，实现展开/折叠 */
  .wrap.expanded .grid {
    grid-template-rows: 1fr;
  }
</style>

<script>
  // 添加点击事件监听
  document.querySelector(".toggle-btn").addEventListener("click", function () {
    document.querySelector(".wrap").classList.toggle("expanded");
  });
</script>

使用方法

1. 设置 HTML 结构：创建一个包含触发元素和可折叠内容的结构
2. 应用 Grid 样式：为可折叠内容的容器添加 display: grid 和 grid-template-rows: 0fr 样式
3. 添加过渡效果：设置 transition: grid-template-rows 来控制动画速度和缓动函数
4. 控制内容显示：通过改变 grid-template-rows 的值（从 0fr 到 1fr）来触发展开/折叠动画
5. 可选的 JS 交互：添加 JavaScript 代码以响应用户交互（如点击按钮）

常见应用场景

这个技术在以下场景中特别有用：

1. 手风琴组件：多个面板的展开/折叠效果
2. 下拉菜单：导航菜单的展开/收起动画
3. 内容折叠面板：如 FAQ 部分、详情页的可展开信息
4. 动态内容展示：根据用户操作显示或隐藏的内容区域
5. 评论/回复区域：点击按钮展开评论输入框