直接加.fade类对下拉菜单无效，因其不适用tab-pane的fade+show机制；必须手动设置.dropdown-menu初始opacity:0/visibility:hidden、.dropdown-menu.show的opacity:1/visibility:visible及transition，并禁用display切换。
直接加 .fade 类没效果，因为下拉菜单不走 tab-pane 那套逻辑
Bootstrap 5 的 .dropdown-menu 默认不支持 .fade 类——它和选项卡（tab-pane）是两套完全独立的动画机制。你给 <div class="dropdown-menu fade"> 加 <code>fade，浏览器会识别这个类，但 Bootstrap JS 不会给它加 show，也不会触发 opacity 过渡。结果就是：菜单要么一闪出现，要么压根不显示。
想淡入，得手动补 opacity + visibility + transition
下拉菜单的显隐由 JS 控制 show 类开关，而动画必须靠 CSS 显式定义。关键不是加什么类，而是覆盖默认行为：
-
.dropdown-menu初始状态设为opacity: 0; visibility: hidden; -
.dropdown-menu.show设为opacity: 1; visibility: visible; transition: opacity .2s ease-in-out; - 确保父级
.dropdown没有overflow: hidden，否则淡入过程会被裁掉 - 别用
display: none/block做切换——它无法过渡，必须用visibility+opacity
data-bs-trigger="hover" 和淡入效果是两件事，别混着配
悬停展开（data-bs-trigger="hover"）只改触发方式，不影响动画。即使你开了 hover，菜单仍会硬切，除非你同时做了上一步的 CSS 覆盖。常见错误是以为加了 data-bs-trigger="hover" 就自动带淡入，其实 JS 层根本没动 opacity。
- hover 触发需配合
delay防误触：data-bs-delay='{ "show": 200, "hide": 150 }' - 移动端慎用 hover——
matchMedia("(hover: hover)").matches可检测是否支持，否则应 fallback 到 click - ARIA 状态（
aria-expanded）仍由 Bootstrap JS 自动管理，CSS 动画不影响可访问性
二级菜单嵌套时，子菜单淡入要单独写选择器
嵌套下拉（.dropdown-submenu 或 .dropdown-menu .dropdown-menu）不会继承父级动画规则，必须显式声明：
- 给子菜单加更具体的选择器，比如
.dropdown-menu .dropdown-menu.show - 过渡时间建议略短于父级（如
.15s），避免“拖尾感” - 子菜单位置偏移（
top: 0; left: 100%）不能依赖transform动画——它和opacity同时过渡易导致渲染抖动，优先用visibility+opacity - 如果子菜单在右侧贴边时被截断，检查
.dropdown-menu是否有right: 0冲突，淡入时它可能还没完成定位计算
show 类的进入/退出，恰好落在 opacity 可见性变化的临界点上。漏掉 visibility 控制或写了 !important 覆盖 transition，动画就直接失效——这种问题在审查元素里一眼就能看到 computed 样式里 transition 是否生效。
