transition 对 transform 无效是因为浏览器默认 transform 初始值为 none，无法与具体变换值插值；必须显式声明完整初始值（如 translateX(0) rotate(0deg) scale(1)），且多个函数需空格拼接、顺序固定（推荐 translate→rotate→scale），避免覆盖；应仅过渡 transform 而非 all，以提升性能；iOS Safari 中 transitionend 易失效，需校验 propertyName 并加 setTimeout 兜底。
transition 对 transform 无效？先写死初始值
直接写 transition: all 0.3s，然后只改 transform 值，动画大概率不触发——因为浏览器默认的 transform 初始值是 none，而 none 和 translate(10px) scale(1.2) 之间无法插值计算。
必须显式声明起始状态：
- 给元素加
transform: translateX(0) translateY(0) scale(1) rotate(0deg) - 哪怕你只打算动其中一项（比如只缩放），也得把其他项写全，否则过渡会“跳”
- 别用
transform: none重置，它会让过渡中断；改用transform: translateX(0) ...等具体值
多个 transform 函数怎么写才不会覆盖或错序
transform 是单值属性，后声明的会完全覆盖前一个。写成多行或多次 JS 赋值，只会保留最后一次。
正确写法是把所有变换函数用空格拼在一起，顺序很重要：
立即学习“前端免费学习笔记（深入）”；
- 推荐按
translate→rotate→scale的逻辑组织（位移再旋转，和先旋转再位移结果不同） - 例如：
transform: translate(20px, -10px) rotate(15deg) scale(1.1) - 避免拆成
transform: translate(20px, -10px); transform: rotate(15deg);—— 第二行直接干掉第一行 - JS 动态改时，也应一次性设完整字符串：
el.style.transform = 'translateX(30px) scale(1.2)'
transition: all 还是 transition: transform？性能差很多
transition: all 看似省事，但实际会监听所有可动画属性：比如 height、opacity、甚至 font-size，只要它们变了就触发重绘，拖慢帧率。
只过渡 transform 是更安全的选择：
- 写成
transition: transform 0.3s ease，明确告诉浏览器“只管这个” - 如果同时要过渡
opacity，就写成transition: transform 0.3s ease, opacity 0.3s ease - 别用
transition-property: all配合 JS 动态改多个样式——容易误触非预期属性
移动端 Safari 的 transitionend 事件经常不触发
在 iOS Safari 上，transitionend 监听 transform 变化，失败率比桌面高得多。不是代码写错了，而是渲染机制差异。
常见失效原因和应对方式：
- 过渡时间设为
0s或起止值完全相同（比如scale(1)→scale(1)），事件根本不会发 - 用
will-change: transform提升图层后，可能延迟或吞掉事件，调试时建议临时关掉 - 监听时务必校验
e.propertyName === 'transform'，因为all下可能收到其他属性名 - 关键逻辑别只依赖
transitionend，加个setTimeout兜底，延时取值与transition-duration一致
组合变形本身不难，难的是让浏览器稳定插值、不跳变、不模糊、不丢事件。真正卡点往往不在语法，而在初始值是否显式、是否覆盖、是否过度监听——这些细节漏掉一个，动画就“看起来不对”。
