Bootstrap Modal 默认无左右滑动是因为仅启用 fade 动画，未设置水平位移；需通过 CSS 覆盖 .modal.fade .modal-dialog 的 transform: translateX(100%) 和 .modal.show .modal-dialog 的 transform: translateX(0) 并加 !important 强制生效。
Modal 进入动画为什么默认没有左右滑动？
因为 Bootstrap 5+ 的 modal 默认只用了 fade（淡入）和 show（显示）类，底层依赖的是 CSS opacity 和 transform: translate() 的组合过渡，但初始状态里 transform 没设水平偏移，所以不会左右滑入。
要实现左右滑动，必须手动覆盖或重写 .modal 的进入动画关键帧和过渡属性，不能只靠加一个 class 就生效。
如何用 CSS 替换 modal-enter 动画为从右滑入？
核心是重定义 .modal.fade .modal-dialog 的初始位移和过渡行为。Bootstrap 5 使用 transition 控制动画，不是 JS 驱动，所以纯 CSS 即可生效。
- 把
.modal.fade .modal-dialog的初始transform设为translateX(100%)（从右侧外开始） - 给
.modal.show .modal-dialog设为transform: translateX(0)（滑到正中） - 确保
transition包含transform，且时长与原生一致（如.3s） - 注意：必须加
!important覆盖 Bootstrap 的默认transform: translateY(-50%)垂直居中逻辑，否则左右滑会和垂直居中冲突
.modal.fade .modal-dialog {
transform: translateX(100%) !important;
transition: transform 0.3s ease-out;
}
.modal.show .modal-dialog {
transform: translateX(0) !important;
}
从左滑入、上下滑入怎么改？
只需替换 translateX 为对应方向，但要注意模态框默认是垂直居中的，translateY 会被 Bootstrap 自动计算，所以直接改 translateY 容易错位；推荐统一用 translateX 或 translateY + !important 强制覆盖。
- 从左滑入：初始
transform: translateX(-100%) - 从上滑入：初始
transform: translateY(-100%)，同时确保.modal-dialog的margin-top不干扰（可设为0） - 从下滑入：初始
transform: translateY(100%) - 如果想滑入后带轻微回弹，可用
cubic-bezier(0.22, 0.61, 0.36, 1)替代ease-out
为什么加了动画但 modal 不触发滑动？
常见原因不是代码写错，而是触发时机或 class 冲突：
- 没加
fade类 —— Bootstrap 的动画依赖.modal.fade才启用 CSS 过渡，单独用show是无动画的立即显示 - JS 初始化时漏了
backdrop: false或keyboard: false不影响动画，但若用了data-bs-animation="false"属性会禁用所有动画 - 自定义 CSS 被其他样式（比如某个 UI 库或全局 reset）覆盖，建议在
<head>最后或用body > .modal提高权重 - 浏览器 DevTools 里检查
.modal-dialog是否真应用了你的transform和transition，特别留意是否被transform: translateY(-50%)覆盖而没加!important
最稳妥的做法：在 modal 的 show.bs.modal 事件里用 JS 补一次 class 切换，但多数情况纯 CSS 更轻量——前提是把 !important 和 fade 类都落实到位。
