不能直接 transition height: auto，因 auto 非数值，浏览器无法插值动画；需用 max-height、js 读 scrollheight 或 transform/clip-path 等替代方案。
不能直接 transition height: auto，浏览器根本不会动画——这不是 bug，是 CSS 规范限制。 因为 auto 不是数值，没有起始/结束像素值，transition 无法插值。必须绕过它，用可计算、可动画的替代方案。
为什么 height: auto 加 transition 完全无效
常见错误写法：transition: height 0.3s; height: auto; → 展开时“啪”一下弹出，收起时瞬间消失。原因很直接：浏览器渲染前不知道 auto 是多少像素，transition 拿不到起点数字，直接跳变。连 warning 都不报，静默失败。
注意：display: none 切换也一样，它和 height: auto 都属于「不可插值属性」，强行加 transition 等于没写。
- 不要在展开/收起逻辑里依赖
offsetHeight读取后立刻设height，除非你手动触发重排（比如offsetHeight强制读取 +requestAnimationFrame再设值） - 如果内容异步加载（如 fetch 后插入），必须等 DOM 渲染完成（
requestAnimationFrame或ResizeObserver）再读scrollHeight，否则读到的是 0
用 max-height 模拟 height: auto 的实操要点
这是目前最轻量、兼容性最好、无需 JS 计算最终高度的方案。核心是让 max-height 承担过渡职责，靠足够大的上限值“假装”是 auto。
- 初始状态设
max-height: 0+overflow: hidden，确保内容不可见且不占空间 - 展开状态设
max-height: 500px（或更大，如1000px），需保证它 ≥ 所有潜在内容最大高度；太小会截断，太大则收起时有延迟感 - 必须显式声明
transition: max-height 0.3s ease，不能只写transition: all，否则可能意外触发动画其他属性 - 若容器有
padding或border，它们不会随max-height过渡，要单独加进transition并在收起态设为0
JS 动态读取 scrollHeight + height 过渡的可靠写法
当内容高度差异极大（比如从几行到几十行），max-height 的固定上限容易失衡（设小了卡住，设大了收起慢），这时用 JS 读真实高度更精准。
- 先加 class 触发展开，但保持
height: 0和overflow: hidden - 用
getComputedStyle(el).height或el.scrollHeight读目标高度（推荐后者，更稳定） - 立即设
el.style.height = el.scrollHeight + 'px'，然后在requestAnimationFrame里移除height行内样式，交还给 CSS 过渡控制 - 收起时同理：先设
height为当前值，再设回0，transition 自动生效
示例关键片段：
el.style.height = el.scrollHeight + 'px';<br>requestAnimationFrame(() => {<br> el.style.height = '';<br>});
transform: scaleY() 和 clip-path 的适用边界
这两个方案不改变文档流，性能更好，但语义和行为有明显取舍：
-
transform: scaleY(0)→scaleY(1)：缩放整个元素（含文字、子元素），适合纯视觉折叠，不适合需要保留内部交互或精确高度测量的场景 -
clip-path: inset(100% 0 0 0)→inset(0)：裁剪显示区域，不缩放内容，但 Safari 对inset()动画支持不稳定（2026 年仍需测试） - 两者都绕不开「初始隐藏必须用
overflow: hidden」，否则缩放/裁剪时内容可能溢出
真正难的不是选哪个方案，而是判断内容是否动态、高度是否可预估、是否允许轻微布局偏移——这些细节决定了你该用 max-height 的省事，还是 JS 的精准，或是 transform 的流畅。别一上来就封装通用组件，先看这一处 DOM 结构稳不稳定、内容来不来得及测高。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
