下拉菜单淡入需手动添加opacity过渡并协同visibility控制。正确写法：.dropdown-menu设opacity:0/visibility:hidden/双transition；.dropdown-menu.show设opacity:1/visibility:visible；保留原transform动画；注意z-index层级和移动端失焦问题。
下拉菜单默认没有淡入动画，得手动覆盖 CSS
Bootstrap 5 的 .dropdown-menu 默认是用 opacity: 0 + visibility: hidden 控制显隐，过渡靠 transform 位移（下滑），不包含 opacity 变化。想加淡入，必须自己补 transition: opacity .15s ease-in-out，同时确保 visibility 和 opacity 协同生效。
常见错误是只加 opacity 过渡但没处理 visibility 切换时机，导致菜单闪一下或完全不出现。
- 必须在
.dropdown-menu.show上设opacity: 1和visibility: visible - 初始状态（未展开）要写在
.dropdown-menu选择器里：opacity: 0; visibility: hidden; - 避免直接改 Bootstrap 源码，用自定义 CSS 覆盖，且放在 Bootstrap 样式表之后加载
推荐写法：用 transition + visibility 双控
下面这段 CSS 能让下拉菜单同时淡入+下滑，且不破坏 Bootstrap 原有 JS 行为：
.dropdown-menu {
opacity: 0;
visibility: hidden;
transition: opacity 0.15s ease-in-out, transform 0.15s ease-in-out;
}
.dropdown-menu.show {
opacity: 1;
visibility: visible;
}
注意：不要删掉原有的 transform: translateY(-0.25rem) 相关规则（Bootstrap 自带的），否则会丢失位移动画。上面写法是叠加增强，不是替代。
如果只想淡入、不要位移，可以额外加 transform: none !important; 到 .dropdown-menu.show，但会失去原生动效层次感。
遇到 z-index 或遮挡问题怎么办
加了淡入后，有时菜单被其他元素（比如 navbar、fixed header）盖住，本质是 z-index 层级没对齐。Bootstrap 5 中 .dropdown-menu 默认 z-index: 1000，但如果你的导航栏用了 position: sticky 或 z-index: 1020，菜单就会被压住。
- 检查父容器是否设置了
overflow: hidden—— 这会裁剪子元素的transform和opacity动画效果 - 给
.dropdown父元素加position: relative和足够高的z-index（如z-index: 1030） - 避免在
.dropdown-menu上用!important强刷z-index，优先调整父级层级
移动端点击后菜单闪退？可能是 focus 失去触发的
在 iOS Safari 或部分安卓浏览器中，点击下拉触发后立即失去焦点，.show 类被快速移除，造成“闪一下就消失”。这不是动画问题，而是事件流没兜住。
解决方式不是改 CSS，而是加一行 JS 防止意外失焦：
document.addEventListener('click', function(e) {
if (!e.target.closest('.dropdown') && !e.target.closest('.dropdown-menu')) {
document.querySelectorAll('.dropdown-menu.show').forEach(el => el.classList.remove('show'));
}
});
这个逻辑比 Bootstrap 默认的 click-outside 更稳，尤其在触摸屏上。别漏掉 .dropdown-menu 自身也要被排除在外，否则点菜单项会立刻收起。
动画本身很轻量，但组合起来容易卡在某个环节：visibility 切换时机、z-index 层叠顺序、移动端 focus 管理——这三个地方任一出错，淡入效果就不可见。
