用 transform: translateX() 实现折叠最稳，需配合 fixed/absolute 定位、flex 布局解耦宽高、localStorage 持久化状态及 touch-action/aria 等可访问性声明，缺一不可。
用 transform: translateX() 实现折叠最稳，但必须配好定位、flex 布局和状态同步，否则动画卡顿、主内容错位、移动端手势失灵是常态。
为什么直接改 width 或 left 会出问题
浏览器对 width 动画有硬性依赖：初始值必须是明确像素（如 width: 240px），不能是 auto；父容器若为 display: flex，width 会被 flex-basis 覆盖；还得同时设 overflow: hidden 和 transition: width 0.3s, overflow 0.3s。漏一条，动画就失效或跳变。left 则绑定具体像素值，响应式换屏后容易偏移或遮挡。
而 transform: translateX() 走 GPU 加速，不触发重排，也不影响文档流——前提是侧边栏本身脱离文档流。
- 侧边栏必须设
position: fixed或position: absolute，否则transform会把主内容挤动 - 隐藏态写
transform: translateX(-100%)，不是left: -240px - 展开态用
transform: translateX(0)，配合transition: transform 0.3s ease
flex 布局怎么解耦侧边栏和主内容宽度
靠 margin-left 手动同步侧边栏宽度，一换断点就错位；用 flex 让主内容自动填满剩余空间才是健壮解法。
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
立即学习“前端免费学习笔记（深入）”；
- 父容器设
display: flex+min-height: 100vh，避免高度塌陷 - 侧边栏写
flex: 0 0 240px（不伸展、不收缩、固定宽），折叠时切 class 改为flex: 0 0 60px - 主内容区用
flex: 1，别写死width或margin-left - 如果侧边栏是
position: fixed，主内容就得用padding-left预留空间，而非margin-left
怎么让折叠状态刷新后还在、多标签页也同步
纯 CSS 的 checkbox hack 可以记忆状态，但只限单页；跨页面持久化必须靠 localStorage，并监听 storage 事件。
- 点击按钮时存状态：
localStorage.setItem('sidebarCollapsed', 'true') - 页面加载时读取：
const isCollapsed = localStorage.getItem('sidebarCollapsed') === 'true' - 用
classList.toggle('collapsed')同步 DOM 类名，CSS 写.sidebar.collapsed { transform: translateX(-100%); } - 在其他同源页面监听
storage事件：window.addEventListener('storage', e => { if (e.key === 'sidebarCollapsed') updateSidebarUI(e.newValue === 'true'); })
移动端手势和可访问性最容易被忽略的三处
真机上点不动、键盘 Tab 卡在隐藏图标上、滑动页面时侧边栏跟着乱动——这些问题往往不是 JS 写错了，而是 CSS 缺了关键声明。
- 给侧边栏加
touch-action: pan-y，否则 iOS/Android 手势滚动会和 translateX 冲突 - 折叠时给 toggle 按钮同步设
tabindex="-1"和aria-hidden="true"，否则键盘用户会聚焦到不可见元素 - 遮罩层
.overlay必须和侧边栏同级、z-index高于主内容但低于侧边栏，否则点不到按钮或遮不住背景
真正卡住人的不是“怎么写动画”，而是定位方式、布局模型、状态存储、可访问性这四层没对齐。改完代码，务必在真机上点三遍、Tab 两轮、开开发者工具看 computed styles 里 transform 是否生效。
