bootstrap 5.2+ offcanvas 动画由 js 控制类切换触发，非纯 css 实现；需挂载于 body 直接子级、设 tabindex="-1"、手动约束 offcanvas-body 高度并用 css 变量调整动画。
Bootstrap 5.2+ 的 offcanvas 组件本身不依赖 CSS 变换（transform）实现动画，而是用 visibility + opacity + transform 组合过渡；但你不能只靠写 transform: translateX() 就让抽屉动起来——它必须由 Bootstrap 的 JS 控制类切换触发，否则动画不会启动。
为什么 offcanvas 不响应纯 CSS transform 修改
Bootstrap 5 的 offcanvas 动画逻辑绑定在 .show 类的添加/移除上，JS 内部通过监听该类变化来触发动画帧和 backdrop 插入。直接给 .offcanvas 元素加 transform: translateX(-100%) 并设置 transition，只会让元素“静止偏移”，不会激活 JS 的状态管理、遮罩层、Esc 关闭、滚动锁定等关键行为。
- 手动改
transform后，data-bs-dismiss="offcanvas"按钮失效，因为 JS 无法感知当前是否“已展开” -
backdrop不会自动插入到document.body，点击灰色背景无反应 - 移动端 Safari 下，若未设
will-change: transform或未用100dvh，高度计算错误导致内容截断
data-bs-placement 和方向类必须二选一，混用就失效
想让抽屉从左侧滑出，只能用 class="offcanvas offcanvas-start"，不能同时写 data-bs-placement="start"——后者仅在 JS 动态初始化时有效（如 new bootstrap.Offcanvas(el, { placement: 'start' })），HTML 静态写法中它会被忽略。
-
offcanvas-start：LTR 页面下从左滑入，等效旧版offcanvas-left（已废弃） -
offcanvas-end：默认方向，从右滑入；写成offcanvas-right无效 - 大小写敏感：
data-bs-placement="Start"或"END"都不会生效
offcanvas 必须挂载在 直接子级，否则 backdrop 和 ESC 失效
把 <div class="offcanvas"> 套在 <code><main></main>、<div class="container"> 甚至 Vue 的 <code><router-view></router-view> 里，会导致遮罩层插入位置错乱、Esc 键监听丢失、关闭后 body 滚动锁未释放。
- 正确结构：
<header>...</header><main>...</main><div class="offcanvas">...</div> - Vue/React 中必须用
Teleport（Vue）或createPortal（React）将 offcanvas 节点挂到document.body - 漏掉
tabindex="-1"会导致键盘焦点无法进入抽屉，影响可访问性
offcanvas-body 滚动失效？关键是 height + overflow 设置
.offcanvas-body 默认不设高度约束，内容一多就会撑开整个抽屉，底部按钮被顶出视口，且内部不出现滚动条——这不是 bug，是设计预期：你需要自己控制可滚动区域。
- 必须显式设置：
max-height: calc(100dvh - 56px)（减去 header 高度），再加overflow-y: auto - 避免在
.offcanvas或.offcanvas-header上设height，会破坏 JS 计算的动画起始尺寸 - 老版本 iOS 不支持
100dvh，需 JS fallback：document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px')，然后用calc(var(--vh) * 100 - 56px)
最容易被忽略的是：offcanvas 的动画效果实际由 JS 注入的内联 style 控制（比如 transform: translateX(0px)），你写的 CSS transform 规则会被覆盖；真要微调动画曲线，得改 --bs-offcanvas-transition CSS 变量，而不是重写 transform 声明。
