transition漏写属性名会导致跳变，safari 12前不支持all过渡transform/opacity；拼错属性名（如backgound-color）被静默忽略；须显式列出属性并严格小写；auto值无法过渡；多属性应合并时长；none是唯一硬关闭方式；优先用transform/opacity避免layout卡顿。
transition里漏写属性名，对应变化就“跳变”
写了transition: all 0.3s，结果transform一动就卡顿、没动画——不是浏览器bug，是all在 Safari 12 之前根本不支持transform和opacity的过渡。更常见的是拼错属性名，比如backgound-color（少一个r），浏览器静默忽略，你根本看不到报错。
- 必须显式列出所有要过渡的属性：
transition: color 0.3s, background-color 0.3s, transform 0.3s; - 逗号前后不能多空格，也不能漏逗号，否则整条声明失效
- 属性名严格小写，
BackgroundColor或COLOR都无效 -
width、height设为auto时无法过渡，改用max-height或transform: scaleY()
多个属性用同一组参数，别重复写时长
写成transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;没错，但冗余。CSS 规则明确：只有最后一个属性前的时长生效，前面的会被忽略。
- 正确合并写法：
transition: color, background-color, transform 0.3s ease; - 如果某属性需要不同缓动函数，必须单独拆开：
transition: opacity 0.2s linear, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); -
transition-delay按顺序一一对应：第一个 delay 控制第一个属性，第二个 delay 控制第二个属性
transition-property: none 是硬开关，不是“暂停”
想临时禁用过渡做 DOM 批量操作，只把transition-duration设为0s，结果动画还在——因为transition-property: all仍生效，只是快得像没动。真正关闭必须用none。
-
transition-property: none会让整个 transition 引擎停摆，哪怕同时写了transition-duration: 2s也完全无效 - 用 class 切换控制时，必须写完整：
.no-transition { transition-property: none; }，只写transition: none是无效语法 - 避免混用：
transition: all 0.3s;和transition-property: none同时存在时，后者优先级更高，前者被覆盖
哪些属性过渡性能好，哪些容易卡
不是所有能过渡的属性都该用。浏览器对transform和opacity有合成层优化，GPU 加速；但改width、left会触发 layout，频繁变更直接掉帧。
- 优先用：
transform: translateX()代替left，transform: scale()代替width/height - 慎用：
box-shadow、filter（尤其blur()），低端设备上明显卡顿 - 绝对不要过渡：
display、z-index、font-family——它们没有中间值，写了也白写 - 用 DevTools 的「Animations」面板确认实际监听了哪些属性，避免误判
transition会完全覆盖前面的，不是合并。写分散在多个 class 或 CSS-in-JS 中时，务必确保最终生成的是单条完整声明，否则容易遗漏某个属性。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
