应使用 transform: scaleX(0) 替代 height 实现侧边栏缩放动画，因其避免重排、依赖 GPU 加速；需设置 transform-origin 保证原地收拢，并同步控制 aria-hidden 与 tabindex 保障可访问性，移动端则应直接 display: none 并改用 offcanvas。
用 transform: scaleX() 替代 height 实现缩放动画
直接给侧边栏设 height: 0 + overflow: hidden 做折叠，浏览器要反复计算高度、触发布局重排（reflow），动画容易卡顿或跳变。尤其当菜单项含图片、字体加载中、或用了 height: auto 时，collapse 组件根本没法插值。
更稳的做法是放弃控制高度，改用 transform: scaleX(0) 缩放整个容器：
.sidebar { transform-origin: left center; transition: transform 0.3s ease-in-out; }.sidebar.collapsed { transform: scaleX(0); }- 必须加
transform-origin，否则缩放中心偏移，菜单会“向右塌陷”而不是原地收拢 - 父容器无需设
height或overflow，缩放纯靠 GPU 合成，不占文档流
为什么不能直接在 offcanvas 上套 scaleX
Bootstrap 的 offcanvas 默认靠 transform: translateX() 实现滑入滑出，它内部已绑定 show/hide 事件并操作 aria-hidden、tabindex 等可访问性属性。你如果再叠加 scaleX，两个 transform 会冲突，导致动画错乱或遮罩层失效。
真要缩放效果，得绕过 offcanvas，自己写一个独立的侧边栏容器：
- 移除所有
offcanvas-*类，只保留结构语义类（如sidebar） - 用 JS 控制
classList.toggle('collapsed')，别依赖data-bs-toggle - 确保
body在展开态加overflow-x: hidden，否则缩放后可能露出横向滚动条
scaleX(0) 下的点击穿透与焦点问题
缩放为 0 后，元素视觉消失但 DOM 仍在，若没处理好，键盘 Tab 仍会聚焦到里面链接，屏幕阅读器也会朗读——这违反 WCAG。
必须同步控制可访问性状态：
- 加
aria-hidden="true"到侧边栏根元素上，并随collapsed类切换 - 缩放期间禁用所有子项的
tabindex="-1"，展开时恢复为tabindex="0" - 不要只靠 CSS 隐藏：
visibility: hidden或opacity: 0不阻断焦点，display: none虽干净但无法做动画
小屏下缩放菜单 vs 彻底移出文档流
缩放动画适合桌面端微调交互节奏，但在手机上强行缩放一个 280px 宽的侧边栏毫无意义——它本就不该出现在窄屏主视图里。
真正该做的，是在 @media (max-width: 48em) 断点内：
- 用
display: none彻底移出文档流，比任何动画都干净 - 把触发按钮换成
offcanvas按钮，保证 ESC 关闭、手势滑入、焦点管理全链路可用 - 别试图让缩放动画在移动端“降级运行”，那是伪响应式，只会带来滚动异常和可访问性漏洞
缩放不是万能解法，它只解决“桌面端收放节奏”的局部问题；而响应式侧边栏的核心，是不同设备用不同机制——这点最容易被忽略。
