下拉菜单平滑动画需用 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 控制交互状态：
- <li>初始状态：
opacity: 0; visibility: hidden; transform: translateY(-10px); <li>展开状态：opacity: 1; visibility: visible; transform: translateY(0);
<li> transition: opacity 0.2s ease, transform 0.2s ease;（visibility 不支持过渡，靠它开关即可）
避免 display 切换破坏 transition
display: none 会强制中断所有 css 动画和过渡。务必全程使用 visibility + opacity + transform 控制显隐，完全避开 display：
- <li>移除所有
display: none/block 的 js 操作或 :hover 规则 <li>用 visibility: hidden 隐藏时，元素仍参与文档流，不影响父容器高度计算
<li>若需彻底脱离文档流（如避免撑高父容器），可用 position: absolute + top: 100% 定位下拉项
hover 或 focus 触发时需确保父元素稳定
下拉菜单常因鼠标移出触发区域（如父菜单项与下拉项之间有空隙）导致快速闪退。解决方法：
立即学习“前端免费学习笔记（深入）”；
- <li>给父菜单项（
<li> 或 <button></button>）加 position: relative <li>下拉容器用 position: absolute; top: 100%; left: 0; 紧贴父项底部
transition 必须写在「始终存在」的元素上
过渡效果只对持续存在于 DOM 中的元素生效。如果 JS 动态增删下拉菜单节点，transition 会失效。建议：
- <li>html 中预先写好下拉结构（即使初始隐藏），不通过 JS 插入
<li>用类名控制显隐（如 .dropdown--open），而非创建/销毁 DOM
<li>transition 属性写在下拉容器基础选择器上（如 .dropdown-menu），不要只写在 hover 状态里
过渡本身不复杂，但容易忽略 visibility 配合、display 干扰和触发稳定性。把这三点理顺，opacity + transform 的淡入下滑就会自然又可靠。