下拉菜单高度跳动是因height无法从0过渡到auto，应改用max-height过渡并设足够大值（如500px）配合overflow:hidden；需确保内容提前渲染、样式固定，并合理设置过渡时长（0.25s~0.35s）与缓动函数。
下拉菜单高度跳动，通常是因为直接对 height 使用 transition 时，从 0 到 auto 无法过渡——CSS 不支持 auto 值的动画。
用 max-height 替代 height
这是最常用且兼容性好的方案。关键在于：给一个足够大的 max-height（比如 500px），让它“罩住”所有可能内容，再配合 overflow: hidden 隐藏溢出部分。
- 初始状态设
max-height: 0，opacity: 0（可选），overflow: hidden - 展开时设
max-height: 500px（略大于菜单最大高度即可） - 加
transition: max-height 0.3s ease, opacity 0.3s ease
避免内容撑开导致的抖动
如果菜单里有图片、字体加载中、或动态内容（如 JS 插入的子项），实际高度可能在动画开始后才确定，造成“先弹一下再收回去”或“卡顿”。解决办法：
- 确保菜单结构和内容在 CSS 动画触发前已渲染完成（比如不等图片加载完再显示菜单）
- 给内部元素设固定字体大小、行高、内边距，避免重排
- 必要时用
font-display: swap或预加载关键字体
过渡时间与缓动要匹配内容节奏
太快（如 0.1s）显得生硬，太慢（如 0.6s）又拖沓。建议：
立即学习“前端免费学习笔记（深入）”；
- 常规下拉菜单用
0.25s ~ 0.35s比较自然 - 搭配
ease-in-out或cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 Material 的“减速度”）更顺滑 - 关闭时可略快一点（如
0.2s），提升响应感
补充：隐藏时彻底移除元素（可选）
仅靠 max-height: 0 仍占文档流（虽然看不见），若需完全脱离布局，可在动画结束后用 JS 添加 display: none；或者用 visibility: hidden + height: 0 组合，但注意这会影响可访问性。
基本上就这些。不复杂但容易忽略细节，调好 max-height 上限和过渡时机，跳动就没了。
