Bootstrap 5 原生支持 .modal.left.fade 实现左滑入场，依赖 .left 与 .fade 共存触发内置动画规则，初始 transform: translateX(-100%)，显示时恢复 translateX(0)；缺一不可，否则退化为顶部淡入。
如何让 Modal 从左侧滑入（.modal.left.fade）
Bootstrap 5 原生支持左滑入场，但必须用语义类 .left，且要和 .fade 共存——不是靠 JS 配置，也不是改 CSS 动画属性，而是靠预设的定位逻辑。
关键点在于：.modal.left.fade 触发的是 Bootstrap 内置的 left-slide 动画规则，它会把 .modal-dialog 初始位置设为 transform: translateX(-100%)，显示时恢复为 translateX(0)。
- HTML 结构必须写成：
<div class="modal left fade">，缺一不可；只加.left不加.fade，动画不触发 - 不能只给
.modal-dialog加transition——Bootstrap 已在bootstrap.min.css中定义了.modal.left.fade .modal-dialog的完整过渡规则 - 如果页面已有自定义
.modal.fade .modal-dialog全局覆盖，会干扰.left效果，建议限定作用域，例如用.modal.left.fade .modal-dialog单独重写 -
.modal-backdrop的 opacity 过渡必须同步，否则遮罩“啪”一下闪出来；检查 computed style 确认它的transition和.modal-dialog一致
为什么加了 .left 但还是从顶部淡入
常见原因是 HTML 中漏掉了 .fade 类，或者 JS 初始化时手动删/覆盖了 class。
Bootstrap 的 left-slide 动画依赖两个条件同时成立：.left + .fade。只要其中任一缺失，就会退化为默认的 top-fade 动画（或硬切）。
- 检查 DOM：打开开发者工具，确认模态框根元素有且仅有
class="modal left fade"，没有被 JS 清掉fade - 不要在 JS 中写
new bootstrap.Modal(el, { animation: false })——这会移除.fade，直接废掉所有滑入效果 - 避免在父容器上加
overflow: hidden，它会裁掉translateX(-100%)的初始位置，导致第一帧直接“跳”到屏幕内 - 如果用了自定义
data-bs-animation属性，注意它只接受布尔值，data-bs-animation="left"是无效的，会被忽略
右侧滑入怎么写（.modal.right.fade）
右滑和左滑是镜像关系，写法对称：<div class="modal right fade">。它的 CSS 规则是 transform: translateX(100%) → translateX(0)，同样依赖 .fade 存在。
注意：左右滑入都要求模态框宽度不能超过视口，否则 translateX(100%) 会把对话框推到屏幕外太远，动画路径过长，视觉上像“慢吞吞挪进来”。建议控制 .modal-dialog 宽度（如 max-width: 400px）。
- 不要同时加
.left和.right——互斥，后者会覆盖前者 - 移动端 Safari 下若出现闪动，给
.modal-dialog加transform: translateZ(0)强制 GPU 加速 - 如果模态框内容有
position: absolute元素，它们的定位基准是.modal-dialog，初始 translate 会影响其坐标，需额外校准
自定义滑入方向时最容易被忽略的兼容性点
不是动画逻辑写错，而是浏览器对 transform + opacity 同时过渡的处理差异——尤其在旧版 Android WebView 和 iOS 15.4 以下。
最稳的写法是显式声明 transition，不用 all：
.modal.left.fade .modal-dialog {
transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.3s ease-out;
}
.modal.left.fade.show .modal-dialog {
transform: translateX(0);
opacity: 1;
}
- 必须写
cubic-bezier()或ease-out，不能只写ease——Safari 对 ease 解析不稳定，容易卡顿 - 别在动画过程中修改
margin、padding或display，这些会触发 layout，打断硬件加速 -
.modal-backdrop的 transition 必须完全一致，否则遮罩和对话框不同步，产生“撕裂感”
