侧边滑入动画不能用display: none切换，因其为离散属性无法过渡；应使用transform: translateX()配合visibility和transition实现平滑滑入，再结合checkbox hack或遮罩层完成零JS交互闭环。
侧边滑入动画不能靠 display: none 切换，否则 transition 会直接失效——这是绝大多数人卡住的第一步。
为什么 display 会让滑入动画消失
CSS 的 transition 只对「可计算的数值型属性」生效，比如 left、right、transform、opacity。而 display 是离散状态（block/none），没有中间值，浏览器无法插值过渡。
- 现象：菜单“啪”一下闪现或消失，毫无滑动感
- 错误写法：
.sidebar { display: none; } .sidebar.active { display: block; } - 正确思路：让元素始终在 DOM 中，仅通过定位偏移 + 可过渡属性控制显隐
transform: translateX() 是最稳的滑入方案
相比 left 或 right，transform 触发硬件加速、不触发重排、兼容性好（IE10+），且能和 visibility 配合解决点击穿透问题。
- 初始隐藏：给侧边栏加
transform: translateX(100%);（向右完全移出） - 展开状态：
transform: translateX(0); - 必须配
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);—— 这个贝塞尔曲线比默认ease更有弹性感 - 额外加固：加
visibility: hidden;初始态，visibility: visible;展开态，防止隐藏时仍可被点击
用 checkbox hack 实现零 JS 滑入（适合静态页）
纯 CSS 方案，依赖 :checked 状态驱动兄弟/后代元素样式，无 JS 依赖，SEO 友好。
- HTML 结构必须严格：...
- CSS 关键句：
#drawer-toggle:checked ~ .drawer { transform: translateX(0); } - 注意：关闭按钮也得是
，靠取消选中来收起 - 缺点：无法监听打开/关闭回调，也不方便做遮罩层联动
遮罩层（mask）和侧边栏的协同要点
遮罩不是可有可无的装饰，它直接影响交互逻辑和体验闭环。
- 遮罩
.mask必须设position: fixed+z-index高于侧边栏但低于弹窗 - 遮罩点击收起时，别只写
mask.addEventListener('click', hide)，要加判断：if (drawer.classList.contains('open')) hide()，避免误触 - 遮罩的
opacity动画要和侧边栏同步：用同一 duration，但可略缓入（ease-out），视觉上更自然 - 移动端记得加
touch-action: none到遮罩上，防 iOS 滚动穿透
真正难的不是写出滑入效果，而是让「打开→操作→点击遮罩/外部区域→关闭」这一整条路径里，没有任何一帧卡顿、跳变或点击失灵——这要求 transform、visibility、pointer-events 三者配合严密，漏掉任意一个，用户就会感知到“不跟手”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
