transition必须写在侧边栏自身且仅限transform属性，否则动画无效；需配合明确宽度、正确初始隐藏方式（transform+opacity+visibility）、布局模式选择（margin-left或transform）及响应式关闭过渡，并注意iOS Safari兼容性。
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类里，而不是基础状态 —— 首次展开无动画
translateX(-100%) 是起点，不是 translate(-200px)
translateX(-100%) 表示“向左移动自身宽度的 100%”，适配不同尺寸侧边栏；而 translate(-200px) 缺少轴向标识，浏览器可能解析为 X 和 Y 同时偏移，造成意外抖动。
务必确保侧边栏有明确宽度（如 width: 280px 或 flex-basis: 280px），否则 100% 会按父容器算，滑不全甚至卡在半路。
立即学习“前端免费学习笔记（深入）”；
初始隐藏不能用 display: none 或 visibility: hidden —— 这俩无法触发过渡。正确姿势是：transform: translateX(-100%) + opacity: 0 + visibility: hidden（后者防幽灵点击）。
别混用 transform 和 margin-left，选错就留白或跳变
想让主内容区域真实撑满、不留空隙、滚动条重绘？只能用 margin-left 动画，并严格匹配宽度值：margin-left: -280px 对应 width: 280px。
想保持背景内容不动、侧边栏像抽屉一样滑入？必须用 transform: translateX()，并设 position: fixed 或 absolute，否则可能引发父容器溢出。
典型翻车现场：transform: translateX(-100%) 隐藏侧边栏后，还指望 .main-content { flex: 1 } 自动填满——它不会。因为元素仍在文档流中，“看不见”不等于“不存在”。
响应式断点里记得关掉 transition
大屏下侧边栏常驻，但很多人只改 width 和 transform，忘了在 @media (min-width: 768px) 里显式写 transition: none。结果窗口缩放时侧边栏自己抽风滑动。
iOS Safari 下还要额外注意：overflow-x: hidden 加在 <body> 上还不够稳，得补一句 position: fixed; width: 100vw 才能锁死横向滚动。
复杂点在于：动画触发时机、布局感知、移动端滚动穿透这三者必须协同处理，缺一不可。单点调优容易掩盖问题，上线前务必在真机上拖拽窗口反复验证。
