height 无法过渡因 auto 不可插值；max-height 应估算内容高度并留余量，避免过大或 vh 单位；需配合 overflow: hidden、opacity 过渡及 JS 精准控制重排时机。
为什么不能直接用 height 过渡
因为 height: auto 不是可插值的数值，浏览器无法在 height: 0 和 height: auto 之间做平滑过渡——动画会直接跳变或完全失效。哪怕你写 transition: height 0.3s，只要其中一端是 auto，就等于没写。
max-height 过渡怎么设才不翻车
关键不是“越大越好”，而是“够用但不过量”。设成 max-height: 9999px 看似保险，但会导致：动画末尾明显拖慢（浏览器要插值从 0 到近万像素）、滚动性能下降、某些旧版 Safari 渲染卡顿。
- 估算内容高度：每行文字约 24–28px，列表项带 padding 约 40–48px，5 项内容就设
max-height: 240px - 留 10%–20% 余量，避免刚好卡住最后一行
- 避免用
vh单位（如max-height: 80vh），视口缩放时可能突然截断 - 必须配
overflow: hidden，否则内容会撑开容器并溢出
动态内容下如何避免手动估高
纯 CSS 搞不定 scrollHeight，得靠 JS 轻量介入。但别在 click 回调里同步读 scrollHeight 再设 style.maxHeight——容易因重排时机错乱导致闪屏或动画中断。
- 收起时：先移除
open类 → 浏览器触发 transition → 在transitionend事件里设max-height: 0并清除内联样式 - 展开时：先设
max-height: 0（强制重置）→ 强制 reflow（offsetHeight读取一次）→ 再设目标max-height值 - 更稳的做法：用
getComputedStyle(el).height+el.scrollHeight差值预热，但仅对频繁切换的面板值得投入
opacity 和 overflow 配合的细节陷阱
max-height 动画过程中，如果内容文字还没缩到看不见，用户可能看到“文字被压扁”或“半截字悬在空中”。这不是 bug，是 overflow 截断和字体渲染的时序问题。
- 加
opacity: 0初始态 +opacity: 1展开态，和max-height同步过渡，能掩盖视觉撕裂 - 不要只写
transition: all 0.3s，显式声明transition: max-height 0.3s ease, opacity 0.3s ease，避免其他属性干扰 - 移动端点击区域小？给
.collapsible-button加min-height: 44px，符合 iOS 触控最小响应区规范
真正难的不是写出第一版动画，而是当内容从静态文本变成富媒体（含图片、iframe、嵌套 flex 容器）时，scrollHeight 计算失准、异步加载导致高度突变、或者父级 transform 触发了新的层叠上下文从而影响 overflow: hidden 生效——这些都得逐个 case 处理，没法靠一个通用值兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
