transform: translatex()比width更可靠，因其不触发重排，避免文字跳行，仅做gpu加速的视觉位移；需配合position: fixed/absolute、transition: transform 0.35s ease及class切换控制显隐。
用 transform + transition 是最稳的方案，别碰 width 或 display ——前者导致文字跳行，后者直接中断动画。
为什么 transform: translateX() 比 width 更可靠
侧边栏从隐藏到展开时，如果靠改 width 实现，浏览器会重排布局，文字在窄宽度下自动换行，一展开就“弹一下”；而 transform 不触发重排，只做视觉位移，动画顺滑且不影响内部文本流。
-
transform: translateX(-100%)表示完全移出视口左边缘（假设侧边栏在左侧） -
transform: translateX(0)表示归位到正常位置 - CSS 中必须声明
transition: transform 0.35s ease，且不能漏掉transform这个属性名 - 容器需设
position: fixed或absolute，否则transform位移后仍占文档流，主内容会被挤动
classList.toggle() 绑定事件时的常见断点
按钮点击没反应？大概率是 DOM 查询或类名逻辑没对齐。不是 JS 写错了，而是目标元素找错了。
- 确保
document.querySelector('.sidebar')真的能取到侧边栏元素——检查控制台是否返回null - 切换的 class 名要和 CSS 中定义的完全一致，比如 JS 调用
toggle('sidebar-open')，CSS 就得有.sidebar-open { transform: translateX(0); } - 避免在按钮上直接写
onclick="toggleSidebar()"，容易因作用域或执行时机出问题；推荐用addEventListener('click', ...) - 移动端要注意：若侧边栏展开后点击背景收起，需排除侧边栏自身和按钮区域，用
event.target.closest()判断点击位置
遮罩层（overlay）怎么防止误触主内容
展开侧边栏后，用户点主内容区应自动收起，但点侧边栏内部或按钮本身不能触发收起——这靠 pointer-events 控制最干净。
- 遮罩层用一个全屏
<div class="overlay"></div>，初始opacity: 0; pointer-events: none; - 侧边栏展开时，同时加类
.overlay-active，对应opacity: 0.5; pointer-events: auto; - 主内容区无需额外处理，遮罩层盖在上面，自然拦截点击；但记得给它设
z-index高于主内容、低于侧边栏 - 别用
display: none控制遮罩显隐——它会导致transition失效；始终用opacity+pointer-events
真正难的不是写几行 CSS 或 JS，而是三处同步：DOM 结构里元素存在且 ID/class 正确、JS 选中的是那个元素、CSS 的过渡属性名和触发条件完全匹配。漏掉任意一个，动画就卡在“不动”或“闪一下”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
