CSS动态展开效果：用max-height实现平滑过渡

对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《CSS展开内容高度不固定，用max-height实现过渡效果》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

用 max-height 配合 transition 实现展开收起动画，因 CSS 不支持 height: auto 过渡，需设足够大且可控的 max-height（如 500px 或 100vh）作为代理值，配合 overflow: hidden 和 class 切换完成平滑动画。

用 max-height 配合 transition 实现展开收起动画，是处理高度不确定内容的常用方案。关键在于：不能直接对 height: auto 做过渡（CSS 不支持），所以得用一个“足够大但可控”的 max-height 作为代理值。

为什么不用 height 过渡？

CSS 的 transition 无法作用于 height: auto，因为浏览器无法计算“auto”对应的数值起点和终点。即使设了 height: 0 → height: auto，动画也会失效或跳变。

max-height 的取值怎么定？

选一个明显大于内容实际高度的固定值（如 500px、100vh），确保所有可能内容都能被容纳。太小会截断，太大则收起时留白明显、动画变慢。

• 常见稳妥值：max-height: 500px（适合多数文本块）
• 更灵活：max-height: 100vh（整屏高，防超长内容溢出）
• 避免用 max-height: 10000px——虽“保险”，但收起动画会拖沓

基础实现结构

HTML 结构保持简洁：

<div class="collapsible">
  <button class="toggle">展开/收起</button>
  <div class="content">这里是动态内容，行数不定...</div>
</div>

CSS 核心写法：

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-in-out;
}
.collapsible.active .content {
  max-height: 500px; /* 展开态目标值 */
}

JS 控制类名切换即可：

document.querySelector('.toggle').addEventListener('click', () =>
  document.querySelector('.collapsible').classList.toggle('active')
);

优化体验的小细节

让动画更自然，避免生硬感：

• 加 overflow: hidden 防止内容撑出容器
• 过渡时间建议 0.2s–0.4s，过长显迟钝，过短难感知
• 用 ease-in-out 比 linear 更符合视觉惯性
• 若内容含图片或字体加载后高度变化，可监听 load 或用 offsetHeight 动态重设 max-height（进阶需求）

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《CSS动态展开效果：用max-height实现平滑过渡》文章吧，也可关注golang学习网公众号了解相关技术文章。