直接加transition没用，因为Bootstrap 5用display切换显隐且JS写入行内样式覆盖CSS；必须同时设置.opacity、visibility、transform三者，并加!important确保生效。
为什么直接加 transition 没用
因为 Bootstrap 5 的 .dropdown-menu 默认靠 display: none/block 切换显隐，而 display 不支持 CSS 过渡。你只写 .dropdown-menu { transition: opacity 0.2s; }，起点状态（opacity: 0）和终点状态（opacity: 1）其实没被真正“定义”——JS 在显示前会直接写入行内样式 style="opacity: 0; transform: none;"，CSS 类选择器根本覆盖不了。
必须同时控制 opacity、visibility 和 transform
三者缺一不可：
-
opacity控制透明度渐变 -
visibility确保过渡中不响应点击（避免穿透），且动画结束后才真正“退出渲染流” -
transform提供位移感（比如从上往下展开），纯opacity会显得菜单“浮在原地闪现”
正确写法（放在自定义 CSS 最末尾或 <style> 块中）：
.dropdown-menu {
opacity: 0;
visibility: hidden;
transform: translateY(-0.5rem);
transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease;
}
.dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0) !important;
}
注意：!important 是必须的——Popper.js 注入的行内 transform 会覆盖你没加权重的规则。
立即学习“前端免费学习笔记（深入）”；
悬停触发（:hover）时动画卡顿怎么办
这不是 CSS 写错了，是 Bootstrap 原生逻辑冲突：
- JS 绑定的是
click事件，而:hover是纯 CSS 行为 - 鼠标稍一偏移，就可能触发
hide → show → hide循环，造成闪烁或卡顿 - 移动端完全不响应
:hover，导致行为不一致
解决方案只有两个：
- 放弃
:hover，改用data-bs-toggle="dropdown"+ 点击（最稳） - 如果非要用悬停，必须禁用 JS 的 click 监听，并自己用
@media (hover: hover)包裹 hover 规则，同时为触屏设备单独补上点击逻辑
动画时间与缓动函数怎么选
0.25s 是平衡点：
- 短于 0.15s，人眼难感知，像没动
- 长于 0.35s，交互变拖沓，尤其在导航栏这种高频操作区
- 别用
ease-in-out，它起始太慢；推荐cubic-bezier(0.2, 0, 0.2, 1)——起始略缓、中后段加速、收尾柔和，更贴合菜单“弹出”的物理感
最容易被忽略的是：所有过渡属性必须显式列出，不能写 transition: all 0.25s。一旦包含 display 或 height，浏览器会静默失效或卡顿。
