Bootstrap 5.2+ offcanvas 动画由JS控制类切换驱动，不可直接覆盖.transform；硬改会导致状态不同步、遮罩不插入、Esc关闭失效；仅可安全定制transition、opacity和visibility。
不能直接覆盖 .offcanvas.show 的 transform 值来定制动画——Bootstrap 5.2+ 的 offcanvas 动画由 JS 控制类切换驱动，硬改 CSS 会破坏状态同步、遮罩插入和 Esc 关闭逻辑。
为什么改 transform 不生效还导致关闭失效
Offcanvas 的动画不是纯 CSS 过渡，而是 JS 监听 .show 类增删后，动态设置 visibility、opacity 和 transform 并触发 transition。你手动给 .offcanvas 写 transform: translateX(-100%)，JS 就无法感知“已收起”状态，结果是：
-
data-bs-dismiss="offcanvas"按钮点击无响应 - 遮罩层（
.offcanvas-backdrop）不自动插入到末尾 - Esc 键监听丢失，
body滚动锁未释放 - 移动端 Safari 下因高度计算错乱，内容被截断
真正可定制的 CSS 入口只有三个地方
Bootstrap 允许你安全干预的动画相关样式，仅限于以下三处，且必须配合 JS 的类控制机制：
- 修改
.offcanvas的transition属性：比如把默认的transform 0.3s ease-in-out改成transform 0.35s cubic-bezier(0.2, 0, 0.1, 1) - 重写
.offcanvas.show的opacity和visibility，但不要碰transform—— 它由 JS 在运行时注入 - 调整
.offcanvas-backdrop的transition和opacity，例如：.offcanvas-backdrop { transition: opacity 0.25s ease-out; } .offcanvas-backdrop.show { opacity: 0.65 !important; }
想换方向或加缓动？别动 class，改 data-bs-placement 或 JS 初始化参数
抽屉从哪边滑出、用什么缓动曲线，不是靠 CSS 类决定的：
立即学习“前端免费学习笔记（深入）”；
- 方向只能通过
class="offcanvas offcanvas-start"或data-bs-placement="start"（仅在 JS 初始化时有效）指定；混用offcanvas-start和data-bs-placement="end"会失效 - 缓动函数必须写在
transition声明里，比如transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1)，而不是靠 JS 配置 - 若需不同断点下不同动画时长（如移动端更快），可用媒体查询嵌套：
@media (max-width: 991.98px) { .offcanvas { transition: transform 0.25s ease-out; } }
最常被忽略的是：所有自定义动画样式都必须作用于 .offcanvas 和 .offcanvas-backdrop 这两个顶层元素，而非其子容器；一旦写成 .offcanvas-body > .nav，就完全脱离了动画生命周期控制链。
