bootstrap 5 下拉菜单动画需同时定义 .dropdown-menu 初始状态（opacity:0/visibility:hidden/transform）和 .dropdown-menu.show 目标状态（opacity:1/visibility:visible/transform），transition 必须显式列出三项属性并避免 all，popper 冲突时加 !important 和 data-bs-popper="none"，hover 方案应替换为防抖的 js mouseenter/mouseleave 控制，二级菜单需单独设置 position/z-index/transform 并禁用父级 overflow。
直接给 .dropdown-menu 加 transition 没用——因为 Bootstrap 5 用 JS 写行内样式控制初始状态，CSS 类选不到起点，动画根本不会触发。
必须同时定义起点和终点的 opacity、transform、visibility
Bootstrap 5 的 .dropdown-menu 隐藏时，JS 会动态写入 style="opacity: 0; transform: none;"，而你的 CSS 类无法覆盖这个行内值，除非你显式声明并用 !important 强制生效。
-
.dropdown-menu要设初始值：opacity: 0、visibility: hidden、transform: translateY(-0.5rem)（或scaleY(0.8)等） -
.dropdown-menu.show必须设目标值：opacity: 1、visibility: visible、transform: translateY(0) -
transition必须列全三项：transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s cubic-bezier(0.2, 0, 0.2, 1)，不能写all - Popper.js 会动态注入
transform行内样式，所以.dropdown-menu.show里的transform建议加!important
悬停（hover）下拉菜单动画卡顿或闪退？那是交互逻辑冲突
不是 CSS 写错了，是 Bootstrap 的 JS click 事件和你写的 :hover 在争抢控制权。鼠标稍一偏移，就可能触发 hide → show → hide 循环。
- 纯 CSS
:hover方案在桌面端勉强可用，但移动端完全失效，且键盘导航不支持 - 推荐用 JS 监听
mouseenter/mouseleave，调用dropdown.show()/dropdown.hide()方法，再配合data-bs-popper="none"防止 Popper 错位 - 务必加防抖：快速划过多个菜单项时，
clearTimeout上一个hide定时器，避免闪烁 - 检测是否为触屏设备：
'ontouchstart' in document.documentElement，是则禁用 hover 逻辑
二级菜单动画要单独处理 transform 和 z-index
Bootstrap 5 默认不支持多级下拉，子菜单的 .dropdown-menu 默认被父级 overflow: hidden 裁掉，或因定位错乱飘出屏幕。
- 子菜单需显式设
position: absolute、top: 0、left: 100%，并加margin-top: -2px对齐边框 -
z-index必须高于父菜单（如父级z-index: 1000，子级至少1001） - 别用
display: none/block控制显隐——会导致点击穿透；改用opacity+visibility+pointer-events: none/auto - 如果用了 Popper，给子
<ul></ul>加data-bs-popper="none"，否则它会强行重算位置，把你精心写的transform覆盖掉
最容易被忽略的一点：所有动画效果都依赖于 .dropdown-menu.show 这个类真正被 JS 加上——如果你手动删了 data-bs-toggle="dropdown" 或拦截了 Bootstrap 的初始化，那 .show 根本不会出现，CSS 再准也白搭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
