Bootstrap 5弃用jQuery，CSS性能提升解析

Bootstrap 5彻底弃用jQuery并非单纯为“减负”，而是通过原生JavaScript对CSS动画生命周期的精细化掌控，实现了真正可感知的性能跃升：它摒弃display切换引发的强制重排，转而采用visibility+opacity+transform组合实现GPU加速动画；严格依赖.fade类保障backdrop与dialog的毫秒级同步；显式声明transition属性并精准监听transitionend事件，确保状态判断零误差；同时直面CSS加载时序、移动端触摸适配、动态内容重定位等真实场景陷阱——这是一次从“库依赖”到“浏览器原语驾驭”的深度进化，让每个模态框的浮现都成为CSS与JS协同优化的教科书范例。

Bootstrap 5 弃用 jQuery 后的 CSS 性能提升，不来自“删掉一个库就变快”的简单逻辑，而源于原生 JS 对 CSS 动画生命周期的精准控制——它不再依赖 jQuery 的强制重排、隐式批量操作和过渡封装，而是直接读取 getComputedStyle、手动管理 transition 触发时机、并绕过 display 切换这类阻断动画的陷阱。

为什么 display: none + show() 会卡顿

jQuery 风格的 $().modal('show') 内部会先设 display: block 再加 opacity 过渡，但 display 切换会强制触发浏览器重排（reflow），打断 CSS 动画流水线。Bootstrap 5 改用 visibility: hidden + opacity + transform 组合，所有属性都可被 GPU 加速。

• .modal.fade 必须保留：它是 backdrop 和 dialog 同步淡入的前提，删了会导致遮罩层闪现或不同步
• 手动调用 myModal.show() 前，确保元素已渲染且未被 display: none 硬性隐藏（哪怕父级有）
• 不要用 document.querySelector('.modal').style.display = 'block' 强行激活——这会绕过 Bootstrap 的 visibility 控制，后续 hide() 失效

bootstrap.Modal 如何协调 CSS transition

原生实现不再依赖 jQuery 的 animate() 或 fadeIn()，而是监听 transitionend 事件 + getComputedStyle 检查当前状态，从而精确判断动画是否真正结束。这意味着你自定义的 transition 只要符合规范，就能被正确识别。

• 必须显式声明 transition: opacity .15s ease-in-out, transform .15s ease-in-out，不能只写 transition: all .15s（部分浏览器无法识别 all 中的 transform）
• 移动端默认不响应 touchstart，只监听 click；若需 touch 优化，得自己加 addEventListener('touchstart', ...) 并 e.preventDefault()
• 如果 modal 内容高度动态变化（比如加载异步数据），需在内容渲染后手动调用 myModal.handleUpdate() 重新计算 Popper 定位，否则动画位置偏移

data-bs-toggle="modal" 自动初始化时 CSS 动画为何失效

自动初始化只负责实例化并调用 .show()，但不会等待 CSS 文件加载完成或样式计算完毕。若 bootstrap.css 在 bootstrap.bundle.min.js 之后加载，或用了 @import 引入 CSS，show() 执行时样式尚未就绪，transition 就会被跳过。

• 确保 在