bootstrap 5弃用jquery后css性能提升源于原生js对动画生命周期的精准控制：改用visibility+opacity+transform组合替代display切换，避免重排；保留.fade类确保backdrop与dialog动画同步；显式声明transition属性并监听transitionend事件，实现gpu加速与精确状态判断。
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 就会被跳过。
- 确保
<link rel="stylesheet">在<script></script>标签之前，且不使用@import - 避免在
DOMContentLoaded外提前调用new bootstrap.Modal()—— 此时 DOM 已就绪，但 CSSOM 可能还没解析完 - 检查 DevTools 的 Elements 面板：点击 modal 元素，看
.modal.fade.show类是否被加上，以及 computed 样式中transition是否生效；若没生效，大概率是 CSS 加载顺序或选择器权重问题
最易被忽略的是：CSS 动画同步依赖于 .fade 类的存在和结构完整性。哪怕只是删掉一行 transition 声明，或把 .modal.fade .modal-dialog 改成 .modal .modal-dialog，都会导致 backdrop 和 dialog 动画脱节——这不是 JS 错误，也不报错，只能靠肉眼观察和 computed style 对比。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
