Bootstrap 5 动画失效的根本原因是原生 JS 对动画条件要求更严格：必须同时存在 .fade 类、正确声明 transition 属性（如 opacity 和 transform）、DOM 就绪、CSS 加载完成且 JS 执行顺序正确，缺一即退化为硬切。
Bootstrap 5 移除 jQuery 后 CSS 动画异常，根本原因不是“删了 jQuery 就坏了”，而是原生 JS 实现对动画触发、监听和状态管理的要求更严格——你漏掉一个 class、少写一个 transition 属性、或 DOM 尚未就绪就调用 show()，动画就直接退化成硬切。
为什么 .fade 类一删动画就没了
Bootstrap 5 的 .modal.fade 不是可选装饰，它是整个动画链的启动开关。JS 只有在元素带这个 class 时，才会启用 transitionend 监听，并同步 backdrop 和 dialog 的 opacity + transform 过渡。删掉它，JS 认为“你不需要动画”，直接走 visibility: visible 硬显。
-
.fade必须和.modal同时存在，单独加.show或.in没用 - 如果你用自定义
@keyframes替代 fade，仍需保留.fade类，否则 backdrop 不会淡入 - 检查 computed style：删掉
.fade后，transition属性是否还存在？若消失，说明样式加载顺序有问题（CSS 文件在 JS 执行后才加载）
transitionend 监听失败的常见写法
Bootstrap 5 原生实现只监听明确声明的 CSS 属性，不像 jQuery 那样靠 setTimeout 或 transition: all 蒙混过关。写错 transition 声明，事件就永远不触发。
- 必须写全属性：
transition: opacity .15s ease-in-out, transform .15s ease-in-out，不能简写为transition: all .15s - JS 只监听
opacity和transform，如果你改了background-color却没在 transition 里声明，transitionend不会响应 - 动态插入内容后，记得调用
myModal.handleUpdate()，否则 Popper 定位未重算，transform: translate()基准偏移，看起来像动画卡住
data-bs-toggle 点击无反应但控制台静默
这不是 JS 报错，而是初始化时机或属性匹配失败。Bootstrap 5 只在页面加载完成时扫描一次 data-bs-toggle，之后新增的元素不会自动绑定。
立即学习“前端免费学习笔记（深入）”；
- 确认 HTML 中写的是
data-bs-toggle="modal"，不是data-toggle="modal"（后者完全被忽略） - 动态插入后必须手动初始化：
new bootstrap.Modal(document.getElementById('myModal')) - 确保
bootstrap.bundle.min.js已加载完成，且初始化代码包在DOMContentLoaded事件内，否则bootstrap对象还未挂载到 window 上 - 检查元素是否真实存在：
document.querySelector('[data-bs-toggle="modal"]')返回 null？那说明选择器写错了或 DOM 还没渲染
CSS 变量改了但动画不动
Bootstrap 5 把主题色、间距等映射为 --bs-primary 等 CSS 变量，JS 可读写，但变量本身不触发重绘——你得用它驱动真正能动画的属性，且要声明 transition。
- 仅改
document.documentElement.style.setProperty('--bs-primary', '#ff6b6b')不会触发动画，必须配合：transition: --bs-primary .2s - 现代浏览器支持变量过渡，但旧版 Safari（≤16.4）不支持，需降级 fallback
- 变量值变更后，若目标元素的
background-color是由var(--bs-primary)计算而来，且该属性已声明transition: background-color .2s，动画才生效
最常被忽略的点：动画失效往往不是某一行代码写错，而是多个条件缺一不可——.fade 类、正确的 transition 声明、DOM 就绪、JS 执行顺序、CSS 加载完成，全部对齐，动画才真正跑起来。少一个，就退回硬切。
