纯grid无法实现抽屉滑入滑出动画，必须配合transform+类控制；grid只负责布局结构，transform才提供位移与过渡能力，而grid-template-columns等属性不可动画且无法实现视口外滑出效果。
纯 Grid 无法实现抽屉滑入滑出动画，必须配合 transform + 类控制。Grid 只管布局结构，transform 才负责位移和过渡。
为什么不能只靠 grid-template-columns 切换显隐
常见错误是想用媒体查询直接把 grid-template-columns: 280px 1fr 改成 1fr 来“隐藏”侧边栏——这只会让侧边栏列坍缩为 0 宽，内容被裁剪或挤变形，且无动画、无遮罩、无法锁 body 滚动。
-
display: none或visibility: hidden会让 Grid 跳过该区域计算，主内容不会自动拉宽，常留白边 -
opacity: 0不改变占位，侧边栏仍可点击、仍触发焦点，交互逻辑混乱 - Grid 本身不提供“滑出视口”的位移能力，
translateX()是唯一可靠路径
Grid 布局怎么和 transform 抽屉共存不打架
关键在于：Grid 控制“默认结构”，transform 控制“临时状态”。两者作用域分离，但需注意 DOM 层级与定位上下文。
- 侧边栏元素必须是 Grid 容器的直接子项，且设
position: relative（避免 transform 在某些嵌套下失效） - 不要给侧边栏同时写
grid-column: 1和transform: translateX(-100%)后再加width: 280px——transform不影响 Grid 的尺寸计算，但若父容器没设overflow: hidden，滑出部分仍会撑开滚动条 - 推荐结构：
.grid-container设display: grid; grid-template-columns: 280px 1fr;；.sidebar作为第一列子项，初始transform: translateX(-100%);，激活时切transform: translateX(0) - 必须在
.grid-container上加overflow: hidden，否则侧边栏滑出时右侧会漏白
移动端手势滑动关闭时，transform 值怎么和 Grid 列宽协同
JS 手势拖拽中动态设置 transform: translateX(Npx) 时，N 的最大值不能超过侧边栏声明宽度（如 280px），否则松手后回弹错位。Grid 列宽必须是确定值，不能是 minmax() 或 % 这类运行时才计算的表达式。
- 侧边栏容器务必设固定
width: 280px（或flex-basis: 280px），别依赖grid-column: 1 / 2的隐式尺寸 - 调试时用
getBoundingClientRect().width实时读取侧边栏实际宽，比 CSS 声明值更准（尤其含 border-box、字体撑开等） - 如果用了
minmax(250px, 280px)，手势松手判断阈值就得按最小值 250px 算，否则窄屏下拖不到就回弹 - 松手后补全动画必须用
transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1)，别用 JS 动画库——它可能绕过 GPU 加速
body 锁滚动和遮罩层怎么不破坏 Grid 流
抽屉打开时，document.body.style.overflowX = 'hidden' 是必须的，但它不影响 Grid 内部布局。真正容易出问题的是遮罩层（overlay）的位置和层级。
- 遮罩层不能塞进 Grid 容器里——它得是
body直接子元素，position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999 - 如果遮罩层写在 Grid 容器内部，它会被 Grid 的
overflow: hidden截断，点不到、盖不住 - iOS 上遮罩层必须加
touch-action: none，否则划抽屉时会同时触发页面滚动 - 抽屉关闭后恢复
body.style.overflowX = ''，别设'auto'，Safari 会闪一下滚动条
最易忽略的一点：Grid 容器本身高度没撑满视口时，transform 滑出的侧边栏会在滚动后消失——不是动画失效，是父容器 height 不够，导致 overflow: hidden 生效范围错位。务必检查 .grid-container 是否有 min-height: 100vh 且其父级无 margin 塌陷。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
