Bootstrap collapse 默认不支持 width 过渡，因其仅操作 height/visibility/overflow；直接加 width transition 无效，因无 width 值变化触发；推荐用 transform: translateX() 实现平滑折叠，配合事件监听切换 collapsed 类并确保 overflow 和 position 正确。
Bootstrap 默认的侧边栏折叠（比如用 collapse 插件）是瞬间显隐，没有过渡动画；想加平滑的 width / transform 过渡，得自己接管 CSS 动画逻辑——因为 Bootstrap 的 collapse 依赖 height 和 overflow 控制，对 width 折叠不友好。
为什么直接给 width 加 transition 会失效
Bootstrap 的 collapse 类默认只操作 height、visibility 和 overflow，它不会触发布局重排去驱动 width 变化。如果你只写：
.sidebar { transition: width 0.3s ease; }但没在 JS 或 class 切换时同步更新 width 值（比如从 250px → 60px），浏览器根本不会触发过渡。
用 transform: translateX() 替代 width 改变更可靠
基于位移的折叠兼容性好、性能高，且不触发重排。关键点在于：保持元素真实宽度不变，仅用 transform 视觉上“收进”或“拉出”。
- 给侧边栏容器设固定
width（如250px），并设overflow: hidden - 添加一个内层
<div class="sidebar-inner"> 包住所有内容 <li>折叠时对 <code>.sidebar-inner应用transform: translateX(-190px)（即向左移出 190px，只留 60px 可见） - 必须显式声明
transition: transform 0.3s ease，且不能被!important或父级transition覆盖
配合 Bootstrap 的 data-bs-toggle="collapse" 需要手动补 class
Bootstrap 的 collapse 默认不处理 transform，所以得用事件监听来切换自定义 class：
立即学习“前端免费学习笔记（深入）”；
document.addEventListener('DOMContentLoaded', () => {
const sidebar = document.querySelector('.sidebar');
const toggleBtn = document.querySelector('[data-bs-toggle="collapse"]');
// 监听 collapse 的 show / hide 事件
sidebar.addEventListener('show.bs.collapse', () => {
sidebar.classList.remove('collapsed');
});
sidebar.addEventListener('hide.bs.collapse', () => {
sidebar.classList.add('collapsed');
});
});
对应 CSS：
.sidebar { width: 250px; overflow: hidden; }
.sidebar.collapsed .sidebar-inner { transform: translateX(-190px); }
.sidebar .sidebar-inner { transition: transform 0.3s ease; }
移动端适配和滚动穿透问题
折叠后若侧边栏内容仍可滚动，说明 overflow: hidden 没生效；常见原因是父容器有 overflow: visible 或未设 position: relative。
- 确保
.sidebar自身有position: relative，且子元素不溢出其边界 - 折叠状态时，建议同时加
pointer-events: none到隐藏区域，避免误触 - 在小屏下（
max-width: 768px），应禁用折叠动画、直接隐藏侧边栏，改用 offcanvas 模式
真正难调的是 transform 与 flex 布局的嵌套冲突——如果侧边栏是 display: flex 的容器，transform 可能导致子项尺寸计算异常，这时得把 transform 移到最内层内容区，而不是 flex 容器本身。
