transition动画失效主因是滥用all、属性名遗漏或声明错位；须显式列出属性、统一声明、避免混用，且transition-property: none可彻底禁用过渡。
transition缩写里漏写属性名，动画就失效
很多人写 transition: all 0.3s ease; 图省事，结果改了 color 有过渡，改 transform 却立刻跳变——因为老版本浏览器（比如 Safari 12 之前）对 all 的支持不一致，transform、opacity 等部分属性压根不会被纳入过渡队列。
真正可控的做法是显式列出要过渡的属性：
transition: color 0.3s, background-color 0.3s, transform 0.3s;- 如果多个属性用同一组时长和缓动函数，可以合并：
transition: color, background-color, transform 0.3s ease;（注意：只有最后一个属性前的时长生效，前面的会被忽略） - 避免混用
all和具体属性，比如transition: all 0.3s, opacity 0.5s;——行为不可预测，不同浏览器解析顺序不同
transition-property设为none时，其他过渡设置全作废
transition-property: none 是个“硬关闭”开关，哪怕你写了 transition-duration: 2s，也完全没效果。它不是“不触发某属性”，而是直接禁用整个 transition 引擎。
常见误用场景：
- 想临时禁用过渡做 DOM 批量操作，却只改了
transition-duration为0s，但保留transition-property: all→ 实际仍有微弱过渡（尤其在低帧率设备上） - 用 JS 切换 class 控制过渡开关，class 里只写了
transition: none→ 这其实是无效写法，必须明确写成transition-property: none - 正确做法：用 class 切换完整过渡规则，例如
.no-transition { transition-property: none; }
多个transition规则叠加时，以最后声明的为准
CSS 层叠规则照常生效，后写的 transition 会覆盖前面的，而不是合并。比如：
.box {
transition: width 0.2s;
}
.box.active {
transition: height 0.3s, opacity 0.3s;
}
此时 .box.active 元素只会过渡 height 和 opacity，width 变更将无过渡——哪怕它也在状态变化中发生。
需要多属性共存时，必须手动合并：
- 把所有要过渡的属性都写进同一个
transition声明里 - 避免分散在多个选择器中，尤其是通过 BEM 或 utility class 注入时，容易遗漏覆盖
- 如果用 CSS-in-JS 或原子类方案，确保生成的
transition是单条完整声明，而非拼接
transition-delay在hover中写错位置，鼠标移入瞬间就卡顿
transition-delay 必须和 transition-property 写在同一声明里，否则无效。典型错误是这样：
.btn {
transition: background-color 0.2s;
transition-delay: 0.1s; /* ❌ 单独写无效 */
}
浏览器会忽略孤立的 transition-delay，实际变成零延迟。正确写法只有两种：
- 缩写进一行：
transition: background-color 0.2s 0.1s; - 或用完整语法：
transition-property: background-color; transition-duration: 0.2s; transition-delay: 0.1s;
另外注意：hover 进入时的 delay 是从鼠标悬停那一刻开始计时，但离开时的过渡仍按原 duration 立即启动——如果进出都需要 delay，得分别写 :hover 和 :not(:hover) 规则，或者用 transition-timing-function 模拟起始停顿（如 cubic-bezier(0.2, 0, 0.2, 1)）
过渡的“多属性协同”从来不是靠堆参数实现的，而是靠明确控制每个属性是否参与、何时开始、持续多久——漏掉一个逗号、写错一个位置，整条链路就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
