Bootstrap下拉菜单动画需用opacity、visibility和transform三者协同控制，禁用display切换，并在.dropdown-menu.show中覆盖JS样式，transition须明确列出三者且不可用all。
直接改 .dropdown-menu 的 transition 属性基本无效，因为 Bootstrap 5+ 的下拉菜单显隐依赖 JS 动态写入行内样式（如 style="opacity: 0; transform: none;"），CSS 类选择器无法覆盖起点状态。
为什么加了 transition 还没动画？
常见干扰点：
-
display: none阻断一切过渡 —— Bootstrap 默认用它控制显隐，而display不支持 CSS 过渡 - Popper.js 动态注入的
transform: translate3d(...)行内样式，会覆盖你写的transform声明 - 只写
transition: opacity 0.2s，漏掉visibility和transform，菜单会“闪现”在原位，没有进出感 - 没重置
.dropdown-menu.show中的display: block !important，JS 强制设的display会打断过渡流程
必须同时定义起点和终点的 opacity/visibility/transform
动画真正起效的前提是：显隐全程脱离 display 控制，改用 visibility + opacity + transform 组合。示例写法：
.dropdown-menu {
opacity: 0;
visibility: hidden;
transform: translateY(-0.5rem);
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}
.dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
display: block !important;
}
注意：transition 必须写在基础类 .dropdown-menu 上，不能只写在 .show 上；visibility 必须显式声明，否则过渡中元素仍占布局空间、可被点击。
立即学习“前端免费学习笔记（深入）”；
如何覆盖 Popper 的行内 transform？
Popper.js 会在 .dropdown-menu 上加类似 style="transform: translate3d(0px, 40px, 0px);" 的样式，优先级高于普通类选择器。解决方法：
- 用更高优先级选择器，例如
.navbar .dropdown-menu.show或[data-popper-placement] .dropdown-menu.show - 对关键属性加
!important，如transform: translateY(0) !important; - 若使用 SCSS，推荐在自定义文件中
@extend .dropdown-menu后重置，避免被编译后 CSS 覆盖
移动端点击穿透和悬停失效怎么防？
加完 opacity 动画后，iOS Safari 和部分安卓 WebView 容易出现点击穿透或悬停不收起，根源是事件机制与 Bootstrap 响应式逻辑错位：
- 给
.dropdown-menu初始状态加pointer-events: none - 在
.dropdown-menu.show中设回pointer-events: auto - 禁用纯
:hover触发下拉 —— Bootstrap 默认在触屏设备上忽略它，必须靠data-bs-toggle="dropdown"或 JS 控制 - 检查父容器是否设了
overflow: hidden，它可能裁掉 transform 动画过程
最易被忽略的一点：动画不是加个 transition 就完事，而是要把整个显隐逻辑从 display 流程里彻底踢出去 —— 起点、终点、过渡属性、事件响应，四者缺一不可。
