下拉菜单动画不能直接用 height: 0 → auto 过渡，因 css 不支持 auto 插值；应使用 max-height 或 transform: scaley() 配合 overflow: hidden 实现，并注意 aria-expanded 和焦点管理以保障可访问性。
下拉菜单加动画不是加个 transition 就能动起来的——直接对 height 从 0 到 auto 过渡会失效，这是最常见的卡点。
为什么 height: 0 → height: auto 动不了？
CSS 的 transition 不支持 auto 值的插值计算，浏览器无法知道“自动高度”具体是多少像素，自然没法做渐变过渡。
- 常见错误写法：
transition: height 0.3s ease;+height: auto;（动画不触发） - 真正生效的是固定数值之间的过渡，比如
height: 0→height: 200px - 但菜单项数量不固定时，写死高度不可行
用 max-height 替代 height 是最稳妥的方案
给容器设一个足够大的 max-height 上限（远超内容实际高度），再配合 overflow: hidden，就能用 transition 模拟展开收缩效果。
- 初始状态：
max-height: 0+overflow: hidden - 展开状态：
max-height: 500px（选一个安全值，比如最多 10 条菜单项的高度） - 必须加
overflow: hidden，否则内容会溢出并破坏动画观感 - 示例关键代码：
.dropdown-menu { max-height: 0; overflow: hidden; transition: max-height 0.25s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-menu.open { max-height: 500px; }
更现代的解法：用 transform: scaleY() + origin
如果只需要“向下拉伸”视觉效果（不要求精确高度匹配），scaleY 性能更好、兼容性也够用（IE10+）。
- 初始：
transform: scaleY(0)+transform-origin: top - 展开：
transform: scaleY(1) - 注意：必须搭配
overflow: hidden，否则缩放过程中文字可能短暂溢出 - 优势是不依赖预估高度，也不受子元素 padding/margin 影响
- 缺点是缩放会轻微挤压文字，对字体渲染敏感的场景需测试
JavaScript 控制时机时，别忘了 aria-expanded 和焦点管理
纯 CSS 方案容易忽略可访问性。用 JS 切换类名时，务必同步更新语义属性：
- 按钮上加
aria-expanded="true/false"，屏幕阅读器靠它判断状态 - 菜单展开后，用
focus()把键盘焦点移到第一个可交互项（如第一个<a></a>） - 按
Esc关闭菜单时，焦点要回退到触发按钮上 - 若菜单内有表单控件，需监听
blur防止意外关闭
真正难的不是让菜单动起来，而是动得自然、关得及时、读得清楚——尤其当菜单嵌套或出现在滚动区域里时，max-height 的上限值和 transform 的锚点位置都得实测调整。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
