纯CSS侧边栏展开应避免width直接变化引发重排，推荐用max-width+overflow:hidden或transform:translateX()实现；CSS变量需用于可过渡属性值且带单位，JS修改后需切换class触发动画。
点击按钮时侧边栏从0变宽，但不触发重排
纯CSS实现侧边栏展开，关键不是用 display: none 切换，而是靠 width + overflow + 过渡控制。直接设 width: 0 → width: 240px 会触发浏览器重排，动画卡顿。正确做法是固定容器宽度，用 transform: translateX() 移入移出，或者用 max-width 配合 overflow: hidden。
-
max-width比width更安全：设max-width: 0→max-width: 240px，配合transition: max-width 0.3s ease，浏览器只做合成层动画，不重排 - 必须加
overflow: hidden，否则内容会撑开容器、破坏隐藏效果 - 如果侧边栏内有表单或焦点元素，
max-width: 0后仍可聚焦，需同步加pointer-events: none和visibility: hidden控制交互态
CSS变量怎么绑定到transition上
CSS变量本身不能直接参与 transition，比如写 transition: width var(--sidebar-width) 0.3s 是无效的。真正起作用的是变量被引用的位置——必须用在可过渡的属性值里，比如 width、max-width、opacity 等。
- 定义变量：
:root { --sidebar-open: 240px; --sidebar-closed: 0; } - 在类中使用：
.sidebar { width: var(--sidebar-closed); transition: width 0.3s ease; }和.sidebar.open { width: var(--sidebar-open); } - 注意：变量值必须是合法的CSS长度（如
240px、0），不能是240（缺单位）或auto（不可过渡） - 如果想动态改变量值并触发动画，得用 JS 修改
style.setProperty()，再切换 class，不能只改变量
点击后侧边栏闪一下才展开，常见原因
这不是动画问题，而是渲染时机冲突。最典型的是：JS 点击事件里先改 class，紧接着又读取了某个 offsetWidth 或 getComputedStyle，导致强制同步布局（layout thrashing），打断过渡链。
- 避免在点击处理函数里调用
offsetWidth、getBoundingClientRect()、getComputedStyle(el).width - 如果必须读取尺寸，用
requestAnimationFrame延迟到下一帧，例如：requestAnimationFrame(() => el.offsetWidth) - 检查是否用了
visibility: hidden+opacity: 0双重隐藏，但没配transition: opacity 0.3s, visibility 0.3s—— visibility 不支持过渡，会导致瞬间显示 - 确保父容器没有
contain: layout或will-change: transform干扰合成层判断
移动端点击无响应，和 pointer-events 冲突有关
侧边栏默认用 position: fixed 或 absolute 覆盖在主内容上，但若主内容区域设置了 pointer-events: none（比如为了穿透点击底层地图），就会让侧边栏按钮也失灵。
立即学习“前端免费学习笔记（深入）”；
- 检查按钮父级是否继承了
pointer-events: none，用浏览器开发者工具看 computed 样式 - 侧边栏自身要显式声明：
.sidebar { pointer-events: auto; }，哪怕它已脱离文档流 - 如果用
transform: translateX()实现滑入，注意不要把按钮移出视口范围（比如translateX(-100%)后按钮实际还在 DOM 里，但坐标为负，可能被裁剪或无法命中） - iOS Safari 对
fixed元素在滚动时的 pointer-events 处理较怪，建议加touch-action: manipulation提升响应优先级
