Bootstrap下拉菜单默认不带动画，因display不可过渡；须用opacity、transform等可动画属性配合.show类实现过渡效果，并注意Safari兼容性与可访问性支持。
下拉菜单默认不带动画，transition 对 display 无效
Bootstrap 5 的下拉菜单（.dropdown-menu）默认用 display: none/block 控制显隐，而 display 是 CSS 中**不可过渡的属性**。直接加 transition: all 0.3s 没效果，这是最常踩的坑。
必须改用可动画的属性：比如 opacity、transform、max-height 或 visibility 配合 transition。其中 max-height 最常用，但要注意初始值不能是 0（否则子元素会被裁剪），推荐设为 0 + overflow: hidden + 一个足够大的目标值（如 max-height: 300px）。
- 别碰
display，它无法触发 transition - 避免只用
opacity，因为隐藏时仍占布局空间，可能遮挡下方元素 -
transform: scaleY(0)+transform-origin: top是更干净的方案，但需确保父容器有overflow: hidden
覆盖 Bootstrap 的 JS 触发类，用 .show + transition
Bootstrap 5 下拉菜单展开时，会在 .dropdown-menu 上添加 .show 类。我们只需重写这个类的样式，并补上过渡逻辑：
.dropdown-menu {
opacity: 0;
transform: scaleY(0);
transform-origin: top;
transition: opacity 0.2s ease, transform 0.2s ease;
overflow: hidden;
}
<p>.dropdown-menu.show {
opacity: 1;
transform: scaleY(1);
}注意：Bootstrap 的 JS 本身不会移除 .show 类直到过渡结束，所以这个方案能自然衔接。但如果同时用了 fade 类（如 data-bs-toggle="dropdown" data-bs-auto-close="outside"），得先确认没冲突——fade 类会启用自带淡入，和你的自定义动画打架。
立即学习“前端免费学习笔记（深入）”；
- 务必保留
overflow: hidden，否则scaleY(0)缩放时内容可能溢出 - 如果下拉项高度差异大，
scaleY比max-height更稳定，不依赖预估高度 - 移动端点击区域变小？检查
transform是否导致点击穿透，可加pointer-events: auto到.dropdown-menu.show
解决 Safari 下 transform 动画卡顿或闪烁
Safari（尤其是 iOS）对 transform: scaleY() 的硬件加速支持不稳定，偶尔出现首帧跳变或掉帧。加 will-change: transform 能缓解，但别滥用——只加在 .dropdown-menu 上，且仅在需要动画时动态添加（比如用 JS 监听 show.bs.dropdown 事件）：
.dropdown-menu {
will-change: transform;
}
<p>.dropdown-menu.show {
will-change: unset;
}或者更稳妥：用 translateZ(0) 强制 GPU 加速：
.dropdown-menu {
transform: scaleY(0) translateZ(0);
}
<p>.dropdown-menu.show {
transform: scaleY(1) translateZ(0);
}- 不要全局加
will-change，它会持续占用内存 - 如果用了
backdrop（下拉时背景半透明遮罩），确保.dropdown-backdrop的z-index足够高，否则动画过程中可能被遮住 - 某些旧版 Bootstrap 5.3+ 的
.dropdown-menu默认有animation，记得用!important覆盖（但优先查清是否真需要）
悬停触发（:hover）下拉菜单的动画要额外处理
Bootstrap 默认只支持点击触发，若用 CSS :hover 实现悬停下拉（比如导航栏二级菜单），JS 不会加 .show 类，得靠纯 CSS 控制：
.dropdown:hover .dropdown-menu {
display: block;
opacity: 1;
transform: scaleY(1);
}
<p>.dropdown .dropdown-menu {
display: block; /<em> 先强制显示，再用 opacity/transform 控制可见性 </em>/
opacity: 0;
transform: scaleY(0);
transform-origin: top;
transition: opacity 0.2s ease, transform 0.2s ease;
pointer-events: none;
}</p><p>.dropdown:hover .dropdown-menu,
.dropdown-menu:focus-within {
pointer-events: auto;
}这里的关键是：把 display: block 放在 hover 规则里，而不是初始状态，否则屏幕阅读器可能误读。同时用 pointer-events 防止鼠标划过空白区域时菜单消失。
- 别用
visibility: hidden/visible替代opacity，因为它不可过渡 - 如果下拉菜单有子菜单（三级），嵌套
:hover在移动端会失效，此时必须回退到 JS 触发 - 键盘用户支持弱？加
focus-within是底线，但完整可访问性仍需 JS 补足
真正难的不是写几行 transition，而是判断该用 scaleY 还是 max-height，以及要不要向 Safari 妥协加 translateZ(0)。这些细节不测真机、不看 DevTools 的 Rendering 面板，很容易漏掉。
