下拉菜单平滑动画需用 opacity + transform + visibility 组合实现淡入下滑效果，避免 display 切换；初始 opacity: 0、visibility: hidden、transform: translateY(-10px)，展开时反向切换并添加 transition 过渡；须预置 DOM 结构、用类名控制显隐、消除父项与下拉项间隙以确保触发稳定。
下拉菜单显示太突兀，核心是直接设置 display: none ↔ display: block 或瞬间修改 opacity/visibility 导致无过渡过程。用 transition 配合 opacity 和 transform 能实现平滑淡入+下滑效果，但需注意几个关键点才能真正生效。
必须配合 visibility 或 height 控制可交互性
仅靠 opacity: 0 → 1 过渡不够：透明时菜单仍占布局、能被鼠标穿透点击（或误触）。正确做法是搭配 visibility 控制交互状态：
- 初始状态：
opacity: 0; visibility: hidden; transform: translateY(-10px); - 展开状态：
opacity: 1; visibility: visible; transform: translateY(0); -
transition: opacity 0.2s ease, transform 0.2s ease;（visibility不支持过渡，靠它开关即可）
避免 display 切换破坏 transition
display: none 会强制中断所有 CSS 动画和过渡。务必全程使用 visibility + opacity + transform 控制显隐，完全避开 display：
- 移除所有
display: none/block的 JS 操作或 :hover 规则 - 用
visibility: hidden隐藏时，元素仍参与文档流，不影响父容器高度计算 - 若需彻底脱离文档流（如避免撑高父容器），可用
position: absolute+top: 100%定位下拉项
hover 或 focus 触发时需确保父元素稳定
下拉菜单常因鼠标移出触发区域（如父菜单项与下拉项之间有空隙）导致快速闪退。解决方法：
立即学习“前端免费学习笔记（深入）”；
- 给父菜单项（
或）加position: relative - 下拉容器用
position: absolute; top: 100%; left: 0;紧贴父项底部 - 必要时在父项和下拉项之间加一个「连接区」：用伪元素或微调
margin-top消除间隙
transition 必须写在「始终存在」的元素上
过渡效果只对持续存在于 DOM 中的元素生效。如果 JS 动态增删下拉菜单节点，transition 会失效。建议：
- HTML 中预先写好下拉结构（即使初始隐藏），不通过 JS 插入
- 用类名控制显隐（如
.dropdown--open），而非创建/销毁 DOM - transition 属性写在下拉容器基础选择器上（如
.dropdown-menu），不要只写在 hover 状态里
过渡本身不复杂，但容易忽略 visibility 配合、display 干扰和触发稳定性。把这三点理顺，opacity + transform 的淡入下滑就会自然又可靠。
