如何用CSS实现移动端侧边栏滑动效果_利用transform和transition优化性能-css教程-PHP中文网

translatex() + transition 是移动端侧边栏滑动最稳最轻量方案，因不触发重排、gpu加速、兼容性好，且避免文档流干扰。

如何用css实现移动端侧边栏滑动效果_利用transform和transition优化性能

直接用 transform: translateX() + transition 是目前移动端侧边栏滑动最稳、最轻量的方案，比 left、width 或 display 切换强得多——它不触发重排，GPU 加速默认生效，iOS 和安卓 WebView 都兼容。

为什么必须用 `translateX()` 而不是 `left`

改 left 会强制浏览器计算布局（reflow），尤其在 DOM 深、样式多的页面里，滑动一卡一卡；translateX() 属于合成层操作，只走 GPU，动画帧率更容易拉满。另一个实际影响是：用 left 隐藏时，侧边栏仍占文档流位置，主内容区可能“晃一下”；而 translateX(-100%) 完全脱离流，主内容区不受干扰。

常见错误：

translate(-200px) 缺少轴向标识，浏览器可能解析成 translateX(-200px) translateY(-200px)，导致意外下移
写成 translateX(-200)（漏掉单位），无效
没给侧边栏设明确宽度（如 width: 280px），translateX(-100%) 就按父容器算，滑不全

`transition` 必须写在哪？怎么写才不翻车

transition 必须写在侧边栏自身的基础状态上，不能只写在 .sidebar--open 里，也不能写在按钮或父容器上。否则 class 切换时，变换发生了，但过渡没被声明，就变成“瞬移”。

推荐写法：transition: transform 0.3s ease;

别踩这些坑：

写成 transition: all 0.3s —— 万一后续加了 color 或 opacity 变化，会意外带出其他动画，干扰逻辑
把 transition 放在 :hover 或 JS 内联样式里，失效
初始状态用了 display: none —— transform 和 transition 全部不生效，得先设为 display: block 或用 visibility: hidden 过渡

JS 控制显隐：class 切换是唯一靠谱方式

别在 JS 里写 el.style.transform = 'translateX(0)'，这会覆盖 CSS 中定义的 transition，首次展开没动画；也容易和 rotate/scale 等其他 transform 值冲突。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

正确做法是纯 class 控制：

CSS 定义两个状态：.sidebar--closed { transform: translateX(-100%); } 和 .sidebar--open { transform: translateX(0); }
JS 用 sidebarEl.classList.toggle('sidebar--open') 切换
点蒙层关闭时用 classList.remove()，不是 toggle()，避免误触二次展开
监听 Esc 键：document.addEventListener('keydown', e => e.key === 'Escape' && sidebarEl.classList.remove('sidebar--open'))