bootstrap 5 下拉菜单 transition 失效是因为 js 动态写入行内样式覆盖 css，需同时为 .dropdown-menu（初始态）和 .dropdown-menu.show（目标态）设置 opacity、visibility、transform 及 !important，并避免 display 切换；悬停过渡须用 js 控制 show/hide 并防抖；推荐 transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0, 0.2, 1) !important。
直接给 .dropdown-menu 加 transition 没用——bootstrap 5 的下拉菜单靠 js 动态写入行内样式（比如 style="opacity: 0; transform: none;"），css 类选择器根本盖不住起点状态，动画压根不触发。
为什么 .dropdown-menu.show 的 transition 不生效
Bootstrap 的 .dropdown-menu.show 类本身没定义 transition，而且 JS 注入的 style 属性优先级高于普通 CSS。更关键的是：初始状态（隐藏时）的 opacity 和 transform 是 JS 写死的，你只在 .show 里设终点值，起点不在 CSS 里，浏览器找不到过渡起点。
- 必须同时定义
.dropdown-menu的初始值（含!important覆盖 JS 行内样式） -
.dropdown-menu.show的目标值要带!important，否则 Popper.js 动态写的transform会覆盖它 - 不能只写
transition: opacity 0.2s—— 菜单会“闪”出来，没位移感 - 必须显式列出
opacity、visibility、transform三者，漏掉visibility会导致点击穿透或布局占位
怎么让悬停（hover）时也有平滑过渡
纯 CSS 的 .dropdown:hover .dropdown-menu { display: block; } 会绕过 Bootstrap 的 show 类逻辑，导致你写的 transition 完全失效——因为 display 切换不支持过渡，且 JS 不再参与控制。
- 真正能用的方案是：仅在指针设备上启用 hover，并用 JS 手动调用
show()/hide() - 加
data-bs-popper="none"防止悬停时 Popper 错乱重定位 - 监听
mouseenter后加防抖（比如 150ms），避免快速划过多个菜单项时反复 show/hide 导致闪烁 - 必须保留
focus-within支持键盘导航，否则可访问性不达标
过渡参数怎么配才不卡顿也不突兀
时间值和缓动函数选错，动画要么像抽搐，要么像卡顿播放。Bootstrap 默认的 fade 效果其实只是 opacity 变化，没有位移，视觉上很单薄。
- 推荐组合：
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0, 0.2, 1) !important; -
cubic-bezier(0.2, 0, 0.2, 1)比ease-in-out更适合菜单：起始稍缓，中后段加速，收尾柔和 - 别用
all—— 它会包含display，而display无法过渡，反而拖慢渲染 - 移动端慎用
transform: scaleY()，部分安卓 WebView 对缩放过渡支持不稳定
最易被忽略的一点：动画是否生效，不取决于你写了多少 transition，而取决于你有没有把 display 从显隐逻辑里彻底踢出去。只要还依赖 display: none/block 切换，所有过渡都是徒劳。
