本文介绍如何在不使用 JavaScript 动态计算高度的前提下，通过设置一个“足够大”的 max-height 值，配合 CSS transition 实现任意长度内容的平滑展开/折叠动画。
本文介绍如何在不使用 javascript 动态计算高度的前提下，通过设置一个“足够大”的 `max-height` 值，配合 css `transition` 实现任意长度内容的平滑展开/折叠动画。
在 CSS 中实现可展开/折叠的容器时，最常用的方法是利用 max-height 配合 transition。但直接使用 max-height: none 会导致过渡失效——因为 none 是非数值单位，无法参与 CSS 插值动画。而固定值（如 150px）又难以适配动态或未知长度的内容。
解决方案是：用一个远超内容实际高度的固定 max-height 值（如 1000px、200vh 或 100rem）替代 none。
该值需满足两个条件：
- 足够大，确保所有可能内容都能完全显示；
- 不能过大到影响性能（例如
99999px可能触发重排开销），一般1000px或max(1000px, 100vh)是安全且实用的选择。
以下是完整、可运行的实现示例：
<h2>简介标题</h2> <div class="smalldesc"> <a href="#" id="toggleBtn">展开详情</a> <p>这里是一段可能非常长的文本……（内容略）</p> </div>
.smalldesc {
max-height: 52px; /* 折叠状态高度 */
overflow: hidden;
transition: max-height 1s ease-in-out; /* 仅过渡 max-height，更精准 */
border: 1px solid #e00;
margin: 1em 0;
}
.smalldesc.expand {
max-height: 1000px; /* “无限高”替代方案：足够大但可控 */
}document.getElementById('toggleBtn').addEventListener('click', function(e) {
e.preventDefault();
document.querySelector('.smalldesc').classList.toggle('expand');
this.textContent = this.textContent === '展开详情' ? '收起详情' : '展开详情';
});✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- 无需 JS 测量真实高度，避免 DOM 回流；
- 兼容性好（支持所有现代浏览器及 IE10+）；
- 过渡自然，视觉体验接近“真实高度动画”。
⚠️ 注意事项：
- 避免使用
transition: all，它会强制过渡所有可动画属性（如border-color、opacity），降低性能并可能引发意外动画；应明确指定transition: max-height 1s ease-in-out； - 若内容含图片或异步加载元素，需确保其加载完成后再触发展开，否则
max-height可能不足以容纳最终高度； - 在移动端，建议添加
will-change: max-height提升动画性能（慎用，仅在必要时）； - 极端场景下（如超长富文本嵌套），可进一步搭配
overflow: visible和height: auto的 JS 方案，但会牺牲纯 CSS 的简洁性。
总结：max-height: 1000px 不是“魔法值”，而是工程实践中平衡兼容性、性能与开发效率的务实选择——它让 CSS 过渡重获对“不确定高度”的掌控力，是构建响应式折叠组件的可靠基石。
