Bootstrap 5 默认移除下拉菜单动画，需手动用opacity、visibility和transform配合.show类实现淡入下滑效果，并避免display切换导致过渡失效。
Bootstrap 5 默认下拉菜单没有 CSS 过渡动画
Bootstrap 5 移除了 .dropdown-menu 的 fade 和 show 动画类，原生下拉是即时显示/隐藏的。如果你看到淡入淡出或滑动效果，那大概率是项目里手动加了 CSS，或是用了 Bootstrap 4 的遗留代码。
要加动画，必须自己补过渡逻辑——不能只改 opacity 或 max-height，得配合 display: none/block 的切换时机，否则会失效。
用 CSS transition 实现淡入淡出（推荐）
最稳妥的方式是复用 Bootstrap 的 .show 类触发时机，再叠加过渡属性：
.dropdown-menu {
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}
.dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
-
visibility控制是否响应点击，比display更可控 - 别只写
opacity过渡：没visibility配合，菜单仍会占据布局、拦截鼠标事件 - 避免用
max-height过渡：下拉项高度不确定，容易卡顿或过渡不自然
禁用 JS 自动添加的 .show 类（防止冲突）
Bootstrap 的 Dropdown 组件会在展开时直接给 .dropdown-menu 加 .show 类。如果你的 CSS 动画依赖这个类，但又想自定义入场节奏，就得注意 JS 触发和 CSS 过渡的时序：
- 不要在
.dropdown-menu.show里设display: block—— Bootstrap 已经处理了，重复设置可能破坏隐藏逻辑 - 如果用
data-bs-toggle="dropdown"，JS 展开后立即加.show，你的transition会生效；但收起时 JS 会立刻移除.show，导致“断崖式”消失 - 解决方案：加一层 wrapper 或用
@keyframes+animationend监听，但更简单的是接受“收起无动画”，或改用纯 CSS hover 下拉（仅限桌面）
Bootstrap 4 和 5 的关键差异点
如果你是从 v4 升级上来，注意这些坑：
- v4 的
.dropdown-menu默认带fade类和opacity: 0，v5 完全删了 - v5 的
DropdownJS 不再监听transitionend，所以靠 CSS 动画控制 JS 行为行不通 - v5 的
.dropdown-menu默认display: none，而 v4 是display: block; opacity: 0 - 别试图给
.dropdown-menu加!important强制过渡——Bootstrap 的 JS 会直接操作style.display，CSS 会被绕过
真正起效的只有「类名 + transition 属性」组合，且必须等 JS 加完 .show 后才开始过渡。这点很容易被忽略，结果调半天发现动画根本没跑。
