直接改 .dropdown-menu 的 transition 没动画，是因为 Bootstrap 5 通过 JS 动态写入行内样式（如 opacity: 0; transform: none），CSS 类无法覆盖，导致过渡起点缺失；必须在基础类中显式声明 opacity、visibility、transform 初始值，并在 .dropdown-menu.show 中用 !important 覆盖 JS 注入的 display、opacity、visibility 和 transform，且三者缺一不可。
直接改 .dropdown-menu 的 transition 为什么没动画
因为 Bootstrap 5 的下拉菜单初始状态（opacity: 0、transform: none）是由 JS 动态写入行内样式控制的，比如 style="opacity: 0; transform: none;"。CSS 类选择器无法覆盖这些行内样式，导致过渡起点缺失，transition 形同虚设。
真正起效的前提是：你必须在 .dropdown-menu 基础类中**显式声明初始值**（哪怕加 !important），并在 .dropdown-menu.show 中定义目标值，且后者优先级要能压过 Popper.js 注入的 style。
-
.dropdown-menu必须有opacity、visibility、transform初始值，不能只靠 JS 隐式设置 - 单写
transition: opacity 0.2s不够——漏掉visibility和transform，菜单会“闪现”在原位，没有进出感 - 别用
transition: all，它会包含不支持过渡的display，反而导致卡顿或失效
.dropdown-menu.show 必须强制重置 display
Bootstrap JS 在添加 .show 类时，会强行写入 display: block 行内样式。如果你不覆盖它，这个 display 会打断 opacity 和 visibility 的过渡流程，动画直接跳到终点。
所以 .dropdown-menu.show 里必须写：
立即学习“前端免费学习笔记（深入）”；
.dropdown-menu.show {
display: block !important;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
-
display: block !important是硬性要求，不是可选项 -
visibility: visible必须配对.dropdown-menu中的visibility: hidden，否则过渡中元素仍占布局空间、可被点击 - 所有动画属性（
opacity/visibility/transform）必须同时出现在.show状态里，缺一不可
怎么实现「向上滑入 + 缩放」这类自定义动效
核心是统一起点和终点的 transform 类型，并确保它们可插值。默认的 transform: none 和 transform: translateY(0) 无法平滑过渡，得全部换成带值的声明。
推荐写法（放在自定义 CSS 文件末尾）：
.dropdown-menu {
opacity: 0;
visibility: hidden;
transform: scaleY(0.8) translateY(-10px);
transform-origin: top;
transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2, 0, 0.2, 1) !important;
}
.dropdown-menu.show {
opacity: 1;
visibility: visible;
transform: scaleY(1) translateY(0) !important;
}
-
transform-origin: top配合scaleY()实现从顶部展开的视觉效果 -
cubic-bezier(0.2, 0, 0.2, 1)比ease-in-out更适合菜单：起始稍缓，中后段加速，收尾柔和 -
!important必须加在.show的transform上，否则 Popper.js 的style="transform: translate3d(...)”会直接覆盖你的规则 - 避免用
height或max-height过渡——下拉菜单高度不固定，auto值无法插值
悬停触发（:hover）时动画卡顿或闪退的根本原因
这不是 CSS 写错了，而是 Bootstrap 原生不支持 data-bs-toggle="dropdown" 和 :hover 混用。JS 绑定的 click 事件与 CSS hover 会互相干扰，尤其鼠标移动路径稍偏，就触发 hide → show → hide 循环。
若坚持用悬停，必须彻底禁用 JS 行为：
- 移除所有
data-bs-toggle="dropdown" - 初始化下拉组件时传入
{ autoClose: false }，并禁用 Popper 动态定位（popperConfig: { strategy: 'static' }） - 用纯 CSS 控制显隐：
.dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } - 务必同步维护
aria-expanded属性——否则屏幕阅读器无法感知状态，这是可访问性的硬性要求
真正难的不是让菜单动起来，而是动得自然、关得及时、读得清楚；尤其当菜单嵌套或出现在滚动区域里时，transform-origin 位置和 z-index 层级都得实测调整。
