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 必须挂载在 <body> 直接子级，否则 backdrop 和 ESC 失效
把 <div class="offcanvas"> 套在 <main>、<div class="container"> 甚至 Vue 的 <router-view> 里，会导致遮罩层插入位置错乱、Esc 键监听丢失、关闭后 body 滚动锁未释放。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
立即学习“前端免费学习笔记（深入）”；
- 正确结构：
<body><header>...</header><main>...</main><div class="offcanvas">...</div></body> - 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 声明。
