Bootstrap的transition未生效主因是其规则多含!important或更高优先级选择器，需用同样高优先级+!important覆盖，且必须同时命中状态链（如.collapse与.collapsing），禁用transition:all以防Safari异常。
为什么直接写 transition 没生效
不是你语法错了，而是 Bootstrap 的 transition 规则大多带 !important，或者用更具体的选择器（比如 .collapse, .collapsing）覆盖了你的通用声明。浏览器 DevTools 的 Computed 面板里点开 transition 属性，来源如果是 bootstrap.min.css，说明你的规则根本没赢过它。
常见错误包括：只改了 .collapse.show 却漏掉 .collapsing；写了 transition: all .3s 但 Safari 会把 display 或 visibility 也拖进过渡，导致闪烁；或者压根没加 !important —— Bootstrap 5.3+ 的 collapse、modal、dropdown 动画规则基本都带这个标记。
- 必须用
!important显式覆盖，否则大概率失效 - 别只盯一个类名，Bootstrap 动画依赖多个状态类协同（如
.collapse+.collapsing+.show） -
transition: all在现代浏览器里行为不一致，应明确列出属性
.collapse 和 .collapsing 的 transition 怎么改
Bootstrap 的折叠组件靠 height 过渡，但默认只对 height 设了 transition，且时长固定为 0.35s。你想调缓动函数或加 opacity，得同时命中两个类，并确保它们在 JS 切换状态时能被正确应用。
关键点是：.collapsing 是 JS 在过渡中动态添加的中间类，仅靠 .collapse.show 无法触发“从隐藏到展开”的完整过渡链。
立即学习“前端免费学习笔记（深入）”；
- 写法必须是：
.collapse, .collapsing { transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; } - 如果想用
transform替代 height，要加height: auto !important并配overflow: hidden，否则内容会撑开容器 - 别忘了同步控制
visibility和opacity，否则过渡结束时可能有残留空白或文字突显
Modal 的 fade 动画覆盖要点
Modal 的滑入动画由三组规则联动：初始位移/透明度、最终态、遮罩层。只动其中一处，动画就会跳帧或 backdrop 不同步。
例如想改成从底部上滑，就得同时改：
-
.modal.fade .modal-dialog：设transform: translateY(100%); opacity: 0; -
.modal.fade.show .modal-dialog：设transform: translateY(0); opacity: 1; -
.modal.fade .modal-backdrop：同样加transform和opacity过渡，否则遮罩“啪”一下闪出来 - 必须显式写
transition: transform 0.3s cubic-bezier(...), opacity 0.3s ease-out，不能靠all
分页项和按钮 hover 过渡为什么不动
因为 Bootstrap 的 .page-link 默认无背景色，hover 才设 background-color；.btn 的 hover 状态又依赖变量计算，直接写 transition 会被变量值覆盖或状态切换打断。
解决路径不是硬压，而是补全状态定义：
- 给
.page-link:not(:disabled)显式设background-color和color初始值，再加transition - 按钮类要改 CSS 变量：
:root { --bs-btn-hover-bg: #0a580a; --bs-btn-hover-border-color: #0a580a; }，而不是单写.btn:hover { background: ... } - 所有过渡属性必须在“生效的状态规则”里统一声明，比如
:hover和:focus都得有对应背景/颜色值，否则过渡起点是transparent，视觉上就是“闪”
最易被忽略的是：transition 生效的前提是属性值发生了可计算的变化。如果初始态和 hover 态的 color 都是继承值，浏览器无法插值，过渡就静默失效。
