bootstrap 5 默认不支持右侧滑出抽屉效果，需移除 fade 类、禁用居中 transform，通过自定义 keyframes 和 animation 实现 slideinright/slideoutright 动画，并手动控制 backdrop、滚动锁定及 touch-action。
Bootstrap 5 默认的 modal 是居中淡入，不支持右侧滑出（drawer）效果；要实现它，必须绕过 fade 类和默认 transform 动画，用自定义 CSS 覆盖其过渡逻辑。
禁用默认 fade 和居中 transform
Bootstrap 5 的模态框默认依赖 .fade 类触发动画，并通过 transform: translate(0) 居中。抽屉动效需要移除居中位移、禁用透明度变化，并让容器从右侧外开始位移。
- 去掉
fade类（否则会和自定义动画冲突，且强制 opacity 过渡） - 确保模态框父容器
.modal不设display: flex或justify-content: center—— 抽屉需脱离居中流式布局 - 给
.modal-dialog加margin: 0并设margin-right: -100%（初始隐藏在视口右外）
定义 drawer 进出场关键帧与 transition
用 @keyframes 描述从右外到右贴边的过程，再通过 transition 控制 transform: translateX()，比操作 right 或 margin 更高性能且兼容性好。
@keyframes slideInRight {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
@keyframes slideOutRight {
from { transform: translateX(0); }
to { transform: translateX(100%); }
}
.modal.drawer-right .modal-dialog {
transform: translateX(100%);
transition: transform 0.3s ease-out;
}
.modal.drawer-right.show .modal-dialog {
transform: translateX(0);
}
.modal.drawer-right .modal-dialog {
animation-fill-mode: forwards;
}
.modal.drawer-right.show .modal-dialog {
animation: slideInRight 0.3s ease-out;
}
.modal.drawer-right.hide .modal-dialog {
animation: slideOutRight 0.2s ease-in;
}
注意：不要同时用 transition 和 animation 控制同一属性，上面示例中建议只保留 animation 方案，更可控。
JavaScript 触发时手动控制类名与 backdrop
Bootstrap 5 的 show() 方法默认加 .show 并处理 .modal-backdrop，但抽屉模式下 backdrop 行为需微调：它应从无到有淡入，且不触发模态框居中重排。
- 初始化模态框时传
{backdrop: 'static', keyboard: false}避免默认交互干扰 - 手动在
shown.bs.modal后加.drawer-right.show，并在关闭前用hide()+addEventListener('hidden.bs.modal')清理类名 - 如果 backdrop 显示异常，检查是否被
.modal.fade的opacity过渡覆盖 —— 直接给.modal-backdrop单独加transition: opacity 0.2s
移动端触摸穿透与滚动截断问题
抽屉打开后，body 默认仍可滚动，且 iOS 上容易出现背景内容“透点”或手势冲突。
- 打开时加
document.body.style.overflow = 'hidden'，关闭时恢复（别只靠 Bootstrap 自带的modal-open，它对 drawer 不可靠） - 给
.modal.drawer-right加touch-action: pan-y，防止横向拖拽误触发页面滚动 - 如果抽屉内内容超长，确保
.modal-body设了max-height和overflow-y: auto，否则滚动会作用于 body
抽屉动效看似只是改个方向，但实际涉及动画触发时机、层叠上下文、滚动锁定、以及 backdrop 与 dialog 的解耦控制 —— 最容易被忽略的是 transform 和 position 共存时的渲染层提升问题，建议始终给 .modal-dialog 加 will-change: transform（仅在动画期间）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
