height设为auto时transition失效，因浏览器无法对非数值的auto插值；应改用max-height配合具体数值和overflow:hidden实现过渡动画。
为什么直接对 height 做 transition 会失效
CSS 的 height 属性在值为 auto 时无法参与过渡动画，浏览器无法计算起始和结束的数值差。很多人尝试写 transition: height 0.3s，结果切换时只有“啪”一下展开或收起，毫无动画感。根本原因是 auto 不是具体像素值，transition 没法插值。
常见错误写法：height: auto; transition: height 0.3s; —— 这不会动。
解决方案是绕过 height: auto，改用 max-height 配合一个「足够大但不过分夸张」的固定上限值。
max-height 过渡的关键取值策略
max-height 必须是具体数值（如 px、em），且需满足两个条件：
- 起始状态设为
max-height: 0，同时配overflow: hidden - 展开状态设为一个大于内容实际高度的值，但不能太大（否则动画时间拉长、有延迟感）
常见陷阱：
- 设成
max-height: 1000px—— 内容只高 60px，但动画仍按 1000px 差值匀速跑，前 90% 时间几乎看不出变化 - 设成
max-height: 100vh—— 视口变化时可能触发重排，且移动端键盘弹出后vh改变，导致高度突变
推荐做法：
- 用 JS 预读内容高度（
offsetHeight），动态设max-height（如el.style.maxHeight = el.scrollHeight + 'px'） - 或保守估算：若内容最多 5 行文本 + 图标，设
max-height: 200px通常够用
absolute 定位与 max-height 过渡能一起用吗
不能直接一起用。原因很实在：
-
position: absolute元素脱离文档流，其父容器无法感知它的高度变化 - 折叠面板通常需要父容器「跟着内容撑开/收缩」，而
absolute会让父容器高度坍缩为 0，max-height过渡就失去参照意义
如果你硬要加 absolute，常见后果：
- 面板内容闪现错位（尤其在 Safari 中）
- 点击切换后，面板位置飘到页面左上角
-
max-height动画还在跑，但视觉上像“瞬间出现又消失”
正确姿势是：
- 折叠内容区域保持
position: static或relative - 如需遮罩、悬浮按钮等装饰层，再用
absolute叠在面板外部（不影响主内容流） - 若真要隐藏时彻底脱离布局（比如做侧边抽屉），应换用
transform: scaleY(0)+opacity，而非依赖max-height
过渡卡顿或不平滑的典型原因
即使写了 max-height: 0 → 200px，也可能动画生硬。常见根源：
- 没加
overflow: hidden—— 内容会从 0 高度“溢出”，看起来像撕裂 - 过渡属性写成
transition: all 0.3s—— 一旦其他属性（如color、border）意外变化，会干扰动画节奏 - 使用了
display: none/block切换 —— 这会中断整个渲染流程，max-height动画直接被跳过 - 面板内含图片或字体加载中 ——
scrollHeight读早了，预设的max-height不够，动画中途戛然而止
稳妥写法示例：
.panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.panel.is-open {
max-height: 200px; /* 或 JS 注入的 scrollHeight */
}
关键点在于：别指望一次设值通用所有场景，内容高度波动大时，JS 动态注入仍是目前最稳的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
