使用 max-height 模拟高度过渡动画时，max-height: none 无法触发 CSS 过渡；本文介绍通过设置足够大的 max-height 值（如 1000px）并配合精确的 transition 属性，实现任意长度内容的流畅展开/收起效果。
使用 `max-height` 模拟高度过渡动画时，`max-height: none` 无法触发 css 过渡；本文介绍通过设置足够大的 `max-height` 值（如 `1000px`）并配合精确的 `transition` 属性，实现任意长度内容的流畅展开/收起效果。
在 Web 开发中，为
添加展开/收起动效是常见需求，但 CSS 的 transition 对 height: auto 或 max-height: none 不生效——因为浏览器无法计算“从 0 到无限高”的过渡中间值。根本原因在于：CSS 过渡要求起始值和结束值均为可计算的数值类型。
最实用且兼容性佳的解决方案是：用一个远超内容实际高度的固定 max-height 值作为展开态上限（例如 1000px、200vh 或 100rem），同时确保该值大于所有可能内容的最大高度。这样既保留了 transition 的能力，又避免了硬编码具体像素值带来的截断风险。
✅ 正确写法示例（推荐）：
.smalldesc {
max-height: 52px; /* 折叠态高度 */
overflow: hidden;
transition: max-height 1s ease; /* 仅过渡 max-height，更精准 */
border: 1px solid red;
}
.smalldesc.expand {
max-height: 1000px; /* 展开态设为足够大的值 */
}
⚠️ 注意事项：
- 不要写 transition: all 1s ease：它会强制过渡所有可动画属性（如 border、color），造成性能浪费和意外动画；
- max-height: 1000px 并非“无限”，而是“足够大”：需根据业务场景预估最大内容高度（如长文本 + 多行段落 + 内边距），100vh 或 calc(100vh - 100px) 在响应式场景中更安全；
- 若内容高度动态变化（如异步加载后 DOM 更新），需在内容渲染完成后再添加 .expand 类，或通过 JS 重置 max-height 计算；
- 移动端需注意 vh 单位在 Safari 中可能因地址栏显示/隐藏而波动，此时 1000px 更稳定。
? 进阶提示：若需真正“自适应高度”的过渡（如精确匹配内容真实高度），可借助 JavaScript 动态读取 scrollHeight 并内联设置 max-height，再触发动画（即“JS 驱动 + CSS 过渡”混合方案），但对多数场景而言，max-height: 1000px 已足够简洁高效且零 JS 依赖。
综上，无需 max-height: none，也不必为每段内容单独测量高度——一个合理的大数值 max-height，配合精准的 transition 属性，即可优雅解决任意长度内容的平滑展开问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
