transition 对 transform 无效的主因是未显式声明初始 transform 值或触发强制重排；须在基础样式中设好起始态（如 translateX(-100%)）并始终声明 transition，避免 display 切换或同步布局读取打断动画。
transition 对 transform 无效？检查是否触发了重排
直接给 transform 加 transition 却没动画，大概率是元素初始状态没设好，或者浏览器压根没把它当“可过渡属性”处理。CSS 动画只对“可计算、可插值”的属性生效，transform 是其中之一，但前提是它得有明确的起始值。
- 必须显式声明初始
transform，比如transform: translateX(-200px);，不能依赖浏览器默认（默认是none，而none和translateX(...)在部分浏览器里不构成可插值对） - 确保元素不是
display: none状态下切到block再动 transform——这会强制重排，跳过 transition - 避免在 JS 中用
offsetWidth或读取getComputedStyle(el).transform后立刻改 class，这会强制同步布局，打断动画帧
侧边栏从左滑入：transform + transition 最简写法
不用 JS 控制宽度或 visibility，纯 CSS 实现滑动展开，核心就是控制 transform: translateX() 的位移量，并配好 transition 的时机和缓动。
- 容器设固定宽度（如
width: 240px），并加overflow: hidden防内容溢出 - 侧边栏本身设
transform: translateX(-100%);作为收起态（即完全左移一个自身宽度） - 展开态用 class 切换：
transform: translateX(0); -
transition: transform 0.3s ease-in-out;必须写在基础样式里（不是只写在展开 class 中），否则第一次展开无动画
aside {
width: 240px;
transform: translateX(-100%);
transition: transform 0.3s ease-in-out;
}
aside.open {
transform: translateX(0);
}
移动端点击后侧边栏闪一下才展开？可能是 pointer-events 干扰
常见于用 pointer-events: none 隐藏侧边栏时，点击触发 open class 后，元素瞬间获得响应能力，但 layout 还没完成，导致点击事件穿透或重绘异常。
- 别用
pointer-events: none控制可见性，它不阻止渲染，只禁交互，且切换时无过渡 - 改用
visibility: hidden+opacity: 0组合，配合transition: visibility 0s 0.3s, opacity 0.3s实现延迟隐藏，避免闪 - 更稳妥的做法是保持
visibility: visible，仅靠transform位移控制“是否可见”，让元素始终参与布局和事件捕获
transition 不兼容老浏览器？优先降级为 visibility + opacity
IE10+ 支持 transform + transition，但 IE9 及更早版本完全不支持 transform 过渡；Safari 8-9 对 transform 的 transition 有渲染抖动问题。
立即学习“前端免费学习笔记（深入）”；
- 如果必须兼容 IE9，放弃
transform动画，改用width+overflow+transition，但注意width过渡性能差，慎用于高频操作 - 现代项目中，更推荐用
transform为主，再加一层 JS 检测：if (!CSS.supports('transition', 'transform 0s')) { ... }，走 JS 动画降级（如 requestAnimationFrame + 手动 setStyle） - 不要依赖
@supports (transform: translateX(0))来判断 transition 是否可用——它只检测 transform 支持，不检测 transition 对它的支持
transform: translateX(-100%)。 
