Bootstrap 5 Modal淡入淡出由.fade和.show类共同控制，.fade定义opacity与transform过渡，.show激活动画；仅当二者共存时生效，移除.fade即禁用动画。
Modal淡入淡出效果由哪些CSS类控制
bootstrap 5 的 modal 动画完全依赖 .fade 和 .show 这两个类的组合，不是 js 控制的过渡时长或关键帧。默认情况下，.fade 定义了 opacity 和 transform 的过渡，.show 在显示时激活这些值。
关键点：动画只在元素同时拥有 .fade 和 .show 时生效；移除 .fade 就彻底禁用淡入淡出，变成硬切。
-
.fade类本身包含transition: opacity .15s linear, transform .15s ease-out -
.modal.fade .modal-dialog设置了初始transform: translate(0, -50px) -
.modal.fade.show .modal-dialog覆盖为transform: none，触发位移+透明度变化
如何自定义淡入淡出的持续时间与缓动函数
直接覆盖 Bootstrap 的 CSS 变量或重写 .fade 相关规则即可，无需修改 JS。优先用 CSS 变量（Bootstrap 5.3+ 支持），否则用显式样式。
推荐方式（在你的自定义 CSS 中）：
:root {
--bs-modal-fade-transform: translateY(-20px);
--bs-modal-fade-transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.modal.fade .modal-dialog {
transform: var(--bs-modal-fade-transform);
}
.modal.fade.show .modal-dialog {
transform: none;
}
.fade {
transition: var(--bs-modal-fade-transition);
}
- 改
--bs-modal-fade-transform控制入场起始位置（如scale(0.95)也能用） - 改
--bs-modal-fade-transition同时调整 opacity 和 transform 的时长与缓动 - 不要只改
transition: all—— 容易干扰其他属性，且不兼容旧版 Bootstrap
禁用动画但保留 backdrop 淡入怎么办
有时你只想让模态框“啪”一下弹出来，但 backdrop 仍要渐显。这时不能简单删掉 .fade，因为 backdrop 的 .modal-backdrop.fade 动画也依赖它。
- 给
.modal元素单独移除.fade，但保留.modal-backdrop上的.fade - 手动添加
.show到.modal和.modal-backdrop，并确保 backdrop 的 opacity 过渡独立生效 - 最稳妥做法：用 JS 移除 modal 元素的
.fade类，同时保留 backdrop 的 fade 行为
示例（初始化后执行）：
const myModal = new bootstrap.Modal(document.getElementById('myModal'));
myModal._element.classList.remove('fade'); // 移除 modal 自身的 fade
// backdrop 仍带 fade，不受影响
为什么加了自定义动画 class 却没生效
常见原因是选择器权重不够，或者没命中正确的元素层级。Bootstrap 的动画规则写在 .modal.fade .modal-dialog，而不是直接作用于 .modal。
- 不要只写
.my-custom-modal { animation: ... }—— 必须匹配到.modal.fade .modal-dialog或其子元素 - 避免用
!important，改用更具体的选择器，比如.modal.my-modal.fade .modal-dialog - 检查浏览器 DevTools 中 computed styles，确认
transition和transform是否被覆盖或被禁用（如transition: none） - 如果用了
data-bs-animation="false"（Bootstrap 5.3+ 新属性），会强制跳过所有 fade 行为 —— 这个属性比 CSS 更优先
动画逻辑本身很简单，但容易卡在 CSS 层叠和选择器精度上。动手前先 inspect 元素，看哪条 transition 规则最终生效，比猜更快。
