用 transform: translatex() 实现侧边栏滑出必须配合 transition，且 transition 需写在基础状态上；推荐 class 控制开关态，避免 display: none、width 混用及 inline style 冲突，注意移动端滚动穿透与 position 定位陷阱。
用 transform: translateX() 实现侧边栏滑出，必须配 transition
只写 transform: translateX(-100%) 不会动——CSS 变换本身不带动画，得靠 transition 告诉浏览器“这个属性变化时要过渡”。常见错误是只加了 transform，漏掉 transition 或写错作用属性：
-
transition必须写在「基础状态」（比如侧边栏默认收起或展开）上，不能只写在 hover / class 切换后的状态里 - 推荐写全：
transition: transform 0.3s ease-in-out;，不建议简写成transition: all 0.3s;——all会意外触发重排或影响其他属性动画 - 如果侧边栏初始是
display: none，transform和transition都无效——得先设为display: block或用visibility+opacity配合
JavaScript 控制 class 切换比直接改 style.transform 更可靠
直接操作 element.style.transform = 'translateX(0)' 容易和 CSS 里的 transform 冲突（比如 scale、rotate 共存时被覆盖），也难复用动画曲线。更稳妥的做法是用 class 控制状态：
- 定义两个 class：
.sidebar--closed { transform: translateX(-100%); }和.sidebar--open { transform: translateX(0); } - 用
element.classList.toggle('sidebar--open')切换，避免手动拼字符串或状态管理出错 - 如果需要监听动画结束，用
transitionend事件，但注意它可能因多个可过渡属性（如同时改color和transform）触发多次——加判断：if (e.propertyName === 'transform')
移动端要注意 transform 的硬件加速与滚动穿透
在 iOS Safari 或部分安卓 WebView 里，translateX 默认启用 GPU 加速，但若侧边栏内容高、有复杂子元素，仍可能卡顿；另外，侧边栏弹出时若底层页面还能滚动，就是「滚动穿透」问题：
- 加
will-change: transform;到侧边栏容器（仅在需要时动态加，不用常驻，避免内存占用） - 侧边栏打开时，给
加overflow: hidden;——但注意 Safari 下需额外加position: fixed; top: 0;才真正锁住滚动 - 别用
transform: translateX()+width: 0混搭控制显隐，width触发 layout，破坏平滑性
IE11 兼容需补 -ms- 前缀，但慎用 filter: progid:DXImageTransform.Microsoft.Matrix
IE11 支持 transform，但必须加 -ms-transform 前缀；而 IE9–10 已基本淘汰，不建议为它们硬上 Matrix 滤镜方案：
- 只需写：
-ms-transform: translateX(-100%); transform: translateX(-100%); - IE10+ 的
transition也要加前缀：-ms-transition: -ms-transform 0.3s ease-in-out; - 如果项目已放弃 IE10 及以下，前缀可全删——现代构建工具（如 PostCSS）自动处理更安全
position 类型。用 position: fixed 最省心，但若父容器有 transform、perspective 或 filter，会创建新的 stacking context，导致 fixed 元素相对该容器定位而非视口——这时得改用 position: absolute 并手动控制 top/left，或者剥离侧边栏到 前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
