Bootstrap侧边栏折叠卡顿跳变的根本原因是height:0→auto过渡触发重排；应改用transform:scaleY()配合overflow:hidden和will-change:transform实现平滑动画。
Bootstrap侧边栏折叠时卡顿或跳变
根本原因通常是直接操作 width 或 display，触发重排（reflow），浏览器来不及在帧内完成计算。Bootstrap 5 默认用 classList.toggle() 切换 .collapse 类，但其内置的 CSS 只对 height 做 transition，而 height 从 0 → auto 无法过渡——这正是跳变的源头。
实操建议：
- 放弃依赖
height: auto过渡，改用transform: scaleY()配合overflow: hidden，它只触发重绘（repaint），性能高且平滑 - 确保父容器有明确
height或max-height，否则transform的锚点可能偏移 - 给侧边栏根元素添加
transform-origin: top left，避免缩放时位置漂移
如何用 transform + transition 替换 collapse 默认行为
不修改 Bootstrap JS，只覆盖 CSS 即可生效。关键是把原生 .collapsing 和 .collapse.show 的动画逻辑重定向到 transform。
示例关键 CSS：
.sidebar-collapse {
overflow: hidden;
transform-origin: top left;
transition: transform 0.3s ease-in-out;
}
.sidebar-collapse.collapsing {
transform: scaleY(0);
}
.sidebar-collapse.show {
transform: scaleY(1);
}
注意点：
- 必须移除原生
.collapse的height相关 transition，否则会和transform冲突 -
.collapsing是 Bootstrap JS 在切换过程中临时添加的类，用来标识“正在动画”，要在这里设初始缩放态 - 如果侧边栏含子元素（如 nav-link）有
margin或padding，scaleY(0)可能残留空白，需统一用margin: 0重置
移动端触摸下折叠响应迟钝
常见于 iOS Safari 或 Chrome for Android：手指松开后动画才开始，或中途卡住。这不是 JS 问题，而是浏览器对 transform 的硬件加速未及时启用。
解决办法：
- 给侧边栏加
will-change: transform，提示浏览器提前准备图层 - 避免在
transform动画期间读取offsetHeight或触发getComputedStyle，否则强制同步布局 - 如果用了
position: fixed，iOS 下需额外加-webkit-overflow-scrolling: touch到滚动容器，否则 touchstart 后动画延迟
折叠后内部组件失焦或事件失效
当 transform: scaleY(0) 执行时，元素视觉消失但 DOM 仍存在，部分浏览器（尤其旧版 Edge）会忽略其子元素的 :focus 状态或 pointer events。
稳妥做法：
- 动画结束（
transitionend）后再用 JS 移除/禁用内部交互逻辑，而不是仅靠视觉隐藏 - 显式设置
pointer-events: none在.collapsing和.collapse:not(.show)上 - 若侧边栏内有
input或select，折叠前手动blur()，防止焦点滞留导致键盘弹出异常
CSS 动画的边界很窄：scaleY 能绕过重排，但 scale 本身受父容器尺寸约束；will-change 能提效，但滥用会吃内存；transitionend 的触发时机在不同浏览器里略有差异——这些细节不报错，但一上真机就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
