直接加 transition 没反应是因为 Bootstrap 5 组件默认未声明需动画的属性（如 box-shadow）、JS 动态写入行内样式覆盖 CSS、或使用不可过渡的 display 切换；须显式声明可动画属性、用 opacity/visibility/transform 替代 display、覆盖中间类（如 .collapsing）及 JS 行内样式。
为什么直接加 transition 没反应
Bootstrap 5 的很多组件（比如 .dropdown-menu、.collapse、.modal）默认不带可动画的 transition，或者只对部分属性生效。例如 .card 默认只过渡 background-color 和 border-color，但你加了 box-shadow 悬停效果，它就“卡住”不动——因为没声明 box-shadow 在过渡列表里。
更常见的是 JS 动态写入行内样式（如 style="opacity: 0; transform: translateY(-0.5rem);"），直接盖掉你的 CSS 规则；或者用了 display: none/block 切换，而 display 根本不能被 transition 控制。
- 别写
transition: all .3s——浏览器可能把display、z-index甚至visibility（未显式声明时）也拖进过渡，导致 Safari 卡顿或 Chrome 闪烁 - 必须明确列出你要动的属性：
opacity、transform、box-shadow、color等，且前后状态都得真实存在变化 - 如果目标元素有 JS 注入的
style，就得用!important或更高权重选择器（比如.navbar .nav-link:hover）才能压过它
.dropdown-menu 下拉菜单加悬停动画的硬性条件
下拉菜单默认靠 display 切换，加 transition 无效。要让它平滑进出，必须绕开 display，改用 opacity + visibility + transform 三者协同，并覆盖 JS 行内样式。
- 给
.dropdown-menu设初始态：opacity: 0 !important; visibility: hidden !important; transform: translateY(-0.5rem) !important; - 给
.dropdown-menu.show设目标态：opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; -
transition必须同时写在这两个选择器上（或父级），且显式包含三者：transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out, transform 0.2s ease-in-out; - 漏掉
visibility会导致菜单虽透明但仍占位、可点击；漏掉!important会被 Popper.js 写的行内transform覆盖，动画根本不起
.collapse 折叠面板改 height 过渡总失效？关键在中间类
Bootstrap 的折叠依赖 .collapsing 这个临时类——JS 在展开/收起过程中动态加它，用于触发 height 过渡。只改 .collapse 或 .collapse.show 都不行，起点和过程都丢了。
立即学习“前端免费学习笔记（深入）”；
- 必须同时覆盖
.collapse和.collapsing的transition，且用!important：.collapse, .collapsing { transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } - 如果想用
transform: scaleY()替代 height，得先干掉 height 计算干扰：.collapse { height: auto !important; overflow: hidden; } - 此时
.collapse:not(.show)和.collapse.show需分别设transform: scaleY(0)和scaleY(1)，并配好transform-origin和transition - 注意：动画结束后 JS 可能提前移除
.collapsing类，导致过渡中断、内联height残留——检查shown.bs.collapse事件时机是否与 CSS 时长匹配
Modal 和 Offcanvas 动画不同步的根源
模态框弹出有动画，但点遮罩关闭时“啪”一下消失，大概率是 .modal-backdrop 的过渡没同步改。Offcanvas 同理，data-bs-backdrop="true" 开启的遮罩层有独立 CSS 规则，不跟着主容器走。
- 改 Modal 动画必须三处齐动：
.modal.fade .modal-dialog（初始态）、.modal.fade.show .modal-dialog（终态）、.modal-backdrop.fade（遮罩初始）和.modal-backdrop.show（遮罩终态） - 所有
transition时长必须一致，比如都用0.3s；否则视觉撕裂——modal 慢悠悠下来，backdrop 已经闪没了 - Offcanvas 的 backdrop 颜色由
--bs-offcanvas-backdrop-bg变量控制，默认rgba(0, 0, 0, 0.5)，覆盖它时别忘了重设transition，否则遮罩淡入淡出会断档 - 移动端或旧 Safari 中，
transform组合动画（如scale(0.95) rotate(2deg)）易卡顿，建议拆成单属性或加transform: translateZ(0)强制 GPU 加速
transition 规则里，而在你没覆盖到的 JS 行内样式、没意识到的中间类（比如 .collapsing）、或被忽略的配套属性（比如 visibility）。漏掉任意一环，看起来就是“加了没用”。 
