bootstrap 5 移除 jquery 后，样式与行为边界更清晰：data-bs-* 属性仅被自身 js 显式解析、实例化绑定避免全局事件干扰、transitionend 精准监听声明属性、css 变量直读写支持主题动态切换、dom 生命周期需显式管理、css 加载时机决定动画是否生效。
Bootstrap 5 移除 jQuery 后，自定义 CSS 逻辑反而更容易控制、更少意外干扰——不是因为“没 jQuery 就自由了”，而是原生 JS + 显式 API 让样式与行为的边界真正清晰起来。
data-bs-* 属性不再被 jQuery 选择器隐式劫持
jQuery 时代，data-toggle 这类属性常被插件全局监听（比如 $('[data-toggle]')），你加个自定义动画 class，可能被某个未声明依赖的 jQuery 插件悄悄拦截并 preventDefault()。Bootstrap 5 的 data-bs-toggle 只被自己的 JS 解析一次，且仅在实例化时读取，之后完全交由你控制 DOM 状态和 class 切换。
- 旧写法：
$('a[data-toggle="collapse"]').on('click', ...)—— 全局事件代理，无法隔离 - 新写法：
new bootstrap.Collapse(el)—— 实例绑定，生命周期明确，不污染其他元素 - 你手动加
.animate__fadeIn或@keyframes slideIn，不会被任何 Bootstrap 内部逻辑覆盖或重置
transitionend 监听更精准，避免 all 动画误触发
Bootstrap 4 的 jQuery 动画常依赖 setTimeout 或 $.fn.one('transitionend')，但 transition: all 会导致多个属性同时触发回调，你改了个 opacity 却收到 transform 和 color 的冗余事件。Bootstrap 5 原生实现只监听明确声明的属性：
-
.modal.fade必须带transition: opacity .15s, transform .15s，JS 才会监听这两个属性的transitionend - 你写
transition: opacity .3s ease-out，JS 就只等opacity结束，不会因transform还没动就提前回调 - 删掉
.fade类？transitionend监听直接失效，动画退化为硬切 —— 这反而逼你把动画逻辑显式写进 CSS，而不是靠 JS 黑盒兜底
CSS 变量可直接被 JS 读写，无需 class 切换模拟主题
Bootstrap 5 把所有主题色、间距、断点都映射为 :root 级 CSS 自定义属性（如 --bs-primary），JS 可以直接操作，不用再靠 addClass('theme-dark') 触发一堆 class 切换和重排：
- 读取：
getComputedStyle(document.documentElement).getPropertyValue('--bs-primary') - 修改：
document.documentElement.style.setProperty('--bs-primary', '#ff6b6b') - 动画同步：
transition: --bs-primary .2s（现代浏览器支持）+transitionend监听变量变化 - 注意：CSS 变量本身不触发重排，但若你用它驱动
background-color或border-color，这些属性仍属重绘级，GPU 加速有效
动态内容插入后，CSS 动画不再被 jQuery 的隐式 reflow 搞乱
jQuery 的 .html() 或 .append() 插入内容后，常触发隐式重排（reflow），打断正在进行的 opacity 或 transform 动画流水线。Bootstrap 5 要求你显式管理 DOM 生命周期：
- 异步加载 modal 内容后，必须调用
myModal.handleUpdate()—— 这步不是“修复 bug”，而是明确告诉 Popper：“我已就绪，请重算位置” - 你用
fetch+innerHTML插入内容，动画不会自动续播；但正因如此，你可以精确控制：等内容渲染完、尺寸稳定后再myModal.show() - 如果忘了
handleUpdate()，transform: translate()坐标错位，但错误现象清晰（抖动/偏移），不像 jQuery 那样静默卡顿、难以定位
最易被忽略的点：CSS 加载时机比 JS 更关键。哪怕 bootstrap.bundle.min.js 已加载，只要 .modal.fade 对应的 transition 声明还没解析完，show() 就会跳过动画直接硬切 —— 这不是 JS 问题，是浏览器 CSS 引擎没准备好。所以 link[rel="stylesheet"] 必须在 script 前，且不能用 @import。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
