必须将transition写在侧边栏自身上且仅限transform属性，如transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)；禁用all避免z-index等意外过渡，初始隐藏须用transform: translateX(-100%)而非display: none或visibility: hidden。
transition 必须写在侧边栏自身上，且只过渡 transform
给按钮或父容器加 transition 没用——动画只对被变换的元素生效。侧边栏要动，transition 就得写在它自己上，而且必须明确限定属性：transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1)。
常见错误包括：
-
transition: all 0.3s——会意外过渡z-index或opacity，导致遮罩层错位或点击失效 - 只写
transform: translateX(-100%)却漏掉transition——看起来“设了”，但根本不会动 - 把
transition写在.sidebar--open类里，而不是基础状态——首次展开无动画
初始隐藏不能用 display: none 或 visibility: hidden
display: none 会让元素脱离渲染树，transform 和 transition 全部失效；visibility: hidden 虽保留布局但不可插值，无法触发过渡。
正确姿势是三者配合：
立即学习“前端免费学习笔记（深入）”；
-
transform: translateX(-100%)—— 向左移出自身宽度，确保完全不可见且可动画 -
opacity: 0—— 视觉隐藏，避免闪现 -
visibility: hidden—— 防幽灵点击（仅在完全收起后启用）
注意：translateX(-100%) 是按自身宽度计算，不是 translate(-200px)；后者缺少轴向标识，浏览器可能解析为 X+Y 同时偏移，造成抖动。
选 transform 还是 margin-left？取决于你是否需要主内容真实撑满
想让侧边栏像抽屉一样滑入、背景内容不动？必须用 transform: translateX()，并设 position: fixed 或 absolute，否则可能引发父容器溢出。
想让主内容区域真实填满、不留空隙、滚动条重绘？只能用 margin-left 动画，并严格匹配宽度值：
- 侧边栏宽
width: 280px→ 收起时margin-left: -280px -
transition只写margin-left 0.4s ease，禁用all - 若侧边栏内含
position: sticky元素，margin-left会导致跳变，此时只能换transform方案
响应式断点里必须显式关掉 transition
大屏下侧边栏常驻，但很多人只改 width 和 transform，忘了在 @media (min-width: 768px) 里写 transition: none。结果窗口缩放时侧边栏自己“抽风滑动”。
iOS Safari 下还有额外坑：
-
overflow-x: hidden加在<body>上还不够稳，得补一句position: fixed; width: 100vw才能锁死横向滚动 - 动画触发时没加
will-change: transform（仅动画前临时加），低端机可能出现卡顿 - 拖拽松手瞬间的边界判断、速度衰减、回弹阈值——这些 JS 逻辑和 CSS 动画必须协同，缺一不可
