height: auto 无法参与 css transition，因其为关键字而非可插值数值；应改用 max-height 配合 overflow: hidden 模拟，值需略大于内容最大高度（如 30em 或 500px），避免过大导致动画迟滞或渲染异常。
height: auto 为什么根本不能参与 transition
CSS 的 transition 只对「可插值的数值型属性」生效，而 height: auto 是一个关键字（keyword），不是像素值，浏览器压根不知道它等于多少 px。所以当你写 transition: height 0.3s，再从 height: 0 切到 height: auto，动画不会启动——元素直接“啪”一下撑开，控制台也无报错。
常见错误现象包括：height: 0; transition: height 0.3s; → height: auto; 后无过渡、收起时残留空白、hover 展开瞬间跳变。
用 max-height 替代 height 的实操要点
核心是把不可插值的 height: auto 换成可插值的 max-height，再配合 overflow: hidden 视觉上模拟“自动高度”。但这个值不能乱填：
-
max-height必须是具体数值（如500px、24em），不能是none或auto - 目标值要「够大但不过大」：比内容最大可能高度略高即可，比如 FAQ 面板设
max-height: 30em；过大会导致动画前半段空跑（实际高 200px 却按 1000px 过渡，前 0.2s 几乎不动） - 初始状态必须是
max-height: 0+overflow: hidden，否则收起后仍占布局空间 - 不要同时在 JS 中操作
height和max-height，容易样式冲突、状态错乱
max-height 值设多大才安全
没有统一答案，取决于内容特征：
- 如果行高固定（如
line-height: 1.5）、字数可控，用em最稳，比如max-height: 12em≈ 8 行文本 - 若内容来自用户输入或异步加载，预估困难，保守设
max-height: 500px覆盖 95% 场景比设1000px更合理——后者在低端设备上可能引发 layout thrashing - 绝对不要设
max-height: 9999px：动画缓动函数会拉长无效阶段，视觉延迟明显，且部分旧版 Safari 对超大max-height渲染异常
什么时候必须切回 JS 测量真实高度
当以下任一条件成立，max-height 估算就力不从心：
- 内容高度变化频繁（如实时评论区、富文本编辑器内联预览）
- 字体/行高不统一（混用不同字号、
rem与px、垂直书写模式） - 需要精确控制动画结束时机（比如动画完才触发回调、或与其他元素联动）
这时得用 JS 读取 element.scrollHeight 或 element.getBoundingClientRect().height，再设 height 并触发动画。注意关键一步：设置目标 height 后必须强制重排（例如读一次 offsetHeight），否则浏览器会合并样式操作，动画根本不启动。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
