height: auto 无法参与 transition 是因为浏览器需两个确定数值插值，而 auto 是布局计算结果、无中间帧；推荐用 max-height 模拟，配合 opacity 和 visibility 实现平滑展开收起。
直接用 width 或 height 配合 transition 做动画，只要值是确定的像素（比如 height: 200px），就能平滑过渡；但一旦涉及 height: auto，就必然跳变——这不是写法问题，是浏览器根本无法插值计算。
为什么 height: auto + transition 会瞬间弹出
浏览器在执行 transition 时，需要两个明确的数值做线性插值：height: 0 → height: auto 中的 auto 不是数值，它是一个布局计算结果，没有中间帧。即使你手动设成 height: 300px，后续内容变动（如文字换行、图片加载）也会导致高度错位或截断。
-
height: auto在 transition 中等价于“无动画”，浏览器直接跳到最终布局高度 - 同理，
width: auto也无法参与过渡，除非你用max-width模拟 - 用
transform: scaleY(0)+transform: scaleY(1)可绕过这个问题，但它只缩放视觉，不释放文档流空间
安全又实用的 max-height 替代方案
这是目前最稳定、零 JS、兼容性好（Chrome 26+/Firefox 16+/Safari 6.1+/Edge 12+）的展开收起方案，核心是把 max-height 当作“高度上限开关”来用。
- 不要设
max-height: none：它会让 transition 失效，动画退化为立即切换 - 推荐取值优先级：
max-height: calc(100vh - 80px)>max-height: 1000px>max-height: 100vh（后者在 Safari 移动端可能因地址栏隐藏/显示抖动） - 如果内容高度可预估（如固定 5 条菜单项），直接写死更稳妥：
max-height: 240px（每项 48px）
示例：
.accordion-panel {
max-height: 0;
opacity: 0;
visibility: hidden;
overflow: hidden;
transition: max-height 0.3s ease, opacity 0.3s ease;
}
.accordion-panel.open {
max-height: 600px;
opacity: 1;
visibility: visible;
}
必须同步控制的三个 CSS 属性
单靠 max-height 过渡，收起末尾会出现“边缘突兀消失”或点击穿透（visibility: hidden 没及时生效），必须三者配合：
-
max-height：负责高度渐变（从 0 到上限值） -
opacity：避免视觉闪跳，尤其在快速开/关时 -
visibility：不参与 transition，但必须和类切换同步设置 —— 收起时设为hidden，否则仍可点击
注意：visibility 不能写进 transition 属性里，它只有显隐两种状态，没有中间值。
容易被忽略的 padding/border 动画断裂
max-height 过渡不会带动 padding 或 border 缩放，它们会保持原样，导致收起时顶部/底部留白异常或边框“悬空”。
- 解决办法：显式加入
transition，例如：transition: max-height 0.3s, padding 0.3s, border 0.3s - 别写
transition: all 0.3s：它会意外触发color、background等无关属性动画，拖慢渲染 - JS 动态插入内容后，必须等 DOM 渲染完成（可用
requestAnimationFrame或offsetHeight强制重排）再加.open类，否则scrollHeight读不准，上限值偏小
真正麻烦的从来不是怎么写，而是什么时候该放弃 height、什么时候该补 padding 动画、以及 Safari 移动端那个飘忽的 vh —— 这些细节不试一遍，很难信。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
