使用transition与height或max-height结合可实现CSS高度平滑过渡。1. 基础设置：通过transition声明height变化，配合overflow:hidden实现固定高度展开收起；2. 动态内容：用max-height替代height:auto，设置足够大的值以适应不定高内容；3. 应用场景：常用于折叠面板，通过JavaScript切换类名触发过渡；4. 优化建议：避免height:auto，可添加will-change提升性能，适当调整过渡时间增强自然感，注意减少重流影响。合理运用原生CSS即可实现流畅效果。
在CSS中实现高度的平滑过渡，主要依赖于 transition 属性与 height 的结合使用。虽然 height 本身是一个可动画的属性，但要实现自然流畅的展开或收起效果，需要正确设置过渡行为和触发条件。
1. 基础的高度过渡设置
要让元素的高度变化变得平滑，必须为 height 添加 transition 声明。
.expander {
height: 0;
overflow: hidden;
transition: height 0.3s ease;
}
<p>.expander.open {
height: 200px;
}</p>当给元素添加 .open 类时，高度会从 0 平滑过渡到 200px。注意设置 overflow: hidden 可隐藏溢出内容，避免突然显示。
2. 动态内容的高度自适应（max-height 技巧）
如果内容高度不确定，直接用 height: auto 无法实现过渡，因为 auto 不是具体数值，浏览器无法计算中间状态。
立即学习“前端免费学习笔记（深入）”；
解决方案：使用 max-height 模拟动态高度。
.collapse {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
}
<p>.collapse.expanded {
max-height: 500px; /<em> 设置足够大的值 </em>/
}</p>选择一个比实际内容大的 max-height 值（如 500px 或 1000px），确保内容不会被裁剪，同时仍能实现动画效果。
3. 实际应用场景：折叠面板
常用于FAQ、菜单折叠等交互组件。
HTML结构：
<div class="panel">
<button onclick="toggle()">展开/收起</button>
<div id="content" class="collapse">
这里是动态内容，可能有多行文本或子元素。
</div>
</div>
JavaScript控制：
function toggle() {
const el = document.getElementById('content');
el.classList.toggle('expanded');
}
点击按钮时切换类名，触发CSS过渡，实现视觉上的平滑展开与收起。
4. 注意事项与优化建议
- 避免使用
height: auto在过渡中，它会导致动画失效。 - 配合
will-change: height可提升动画性能，尤其在复杂布局中。 - 若内容高度变化剧烈，适当延长过渡时间（如 0.4s~0.6s）更自然。
- 移动端注意重流（reflow）影响，尽量减少布局抖动。
基本上就这些。合理利用 transition 和 max-height，就能在不依赖JavaScript动画库的情况下，实现原生且流畅的高度过渡效果。
