Bootstrap下拉菜单动画需用opacity、visibility和transform配合，禁用display切换，并在.dropdown-menu.show中覆盖JS样式，transition须明确列出三者且不可用all。
下拉菜单默认没动画，transition 加在哪才生效
Bootstrap 的 .dropdown-menu 默认靠 display: none/block 切换显隐，而 display 不支持过渡，直接加 transition 没用。必须改用 opacity 和 visibility 配合控制，再用 transform 做位移动画。
- 只写
transition: opacity 0.2s不够——菜单会“闪现”在原位，没进出感 - 必须同时控制
opacity、visibility和transform，三者缺一不可 - Bootstrap 5+ 的
.dropdown-menu默认有opacity: 0和transform: translateY(-0.5rem)的隐藏状态，但仅限 JS 初始化后；纯 CSS 动画需手动补全这些规则
覆盖 Bootstrap 的 JS 显隐逻辑，避免冲突
Bootstrap 的 show 类是 JS 动态加的，它会把 display 强制设为 block，直接覆盖你的 opacity 动画。得用更高优先级样式“顶掉”它。
- 把动画规则写在
.dropdown-menu.show上，而不是单独的.show - 必须重置
display：加display: block !important，否则动画不触发 - 给
.dropdown-menu设初始opacity: 0、visibility: hidden、transform: translateY(-0.5rem) - 给
.dropdown-menu.show设opacity: 1、visibility: visible、transform: translateY(0)
transition 属性要写全，别漏 visibility
visibility 本身不触发重排，但它是控制“是否参与渲染”的关键开关。如果只过渡 opacity，菜单虽然透明，仍占布局空间、能被点击；漏掉 visibility 就等于白加动画。
- 正确写法：
transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out - 不能简写成
transition: all 0.2s——all会包含display，而display无法过渡，反而导致动画卡顿或失效 - 时间值统一用
0.2s左右，太长（如0.5s）会让交互变迟钝，太短（0.08s）人眼难感知
移动端点击穿透、悬停失效这些坑怎么绕
加了 opacity 动画后，iOS Safari 和部分安卓 WebView 容易出现点击穿透（点到下层元素），或悬停菜单在触屏设备上不自动收起。这不是动画本身的问题，而是事件机制和 Bootstrap 的响应式逻辑没对齐。
- 给
.dropdown-menu加pointer-events: none，再在.show状态里设回pointer-events: auto，防止过渡中误触 - 移动端不要依赖
:hover触发下拉——Bootstrap 默认禁用，得靠 JS 或data-bs-toggle="dropdown"才可靠 - 如果用了自定义
transform，注意别让菜单超出.dropdown容器，否则overflow: hidden可能裁掉动画过程
动画真正起效的临界点，其实是把 display 从流程里彻底踢出去——不是加个 transition 就完事，而是整套显隐逻辑都要重写。很多人调半天发现没反应，八成是还在跟 display 较劲。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
