transition必须写在元素初始样式中，如button{transition:background-color 0.3s ease;}；background-color被background-image遮盖时需用background简写或background-image:none修复；颜色过渡须统一色彩模型与透明度；transition仅响应计算后属性值变化，需确保dom已渲染或使用classlist切换。
transition没写在默认状态上
transition必须声明在元素的初始样式里，而不是:hover或.active里。浏览器只会在属性值变化时查这个声明，如果它只存在于悬停态，压根不会监听变化。
常见错误写法：button:hover { transition: background-color 0.3s; }——这完全无效。
正确做法是把transition放在按钮的基础选择器中：
button {
background-color: #4a6fa5;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #35527e;
}
- transition必须写在非交互态（如
button、.btn）上 - 哪怕你只动一个属性，也得明确写出属性名+时长+timing-function，
transition: 0.3s不合法 - 如果用了多个过渡属性，用逗号分隔，别指望浏览器自动推断
background-color被background-image盖住了
background是复合属性，background-image默认渲染在background-color之上。即使hover里写了background-color，只要原始样式含linear-gradient或url()，新颜色就被遮住，看起来像“没变”。
典型失效场景：
.btn {
background: linear-gradient(to right, #4a6fa5, #6b8fc9);
}
.btn:hover {
background-color: #35527e; /* ❌ 不可见 */
}
修复方式只有两个：
- 统一用
background简写覆盖整条声明：background: #35527e; - 或者显式清除图像层：
background-image: none;+background-color: #35527e;
注意：不要依赖!important强行覆盖，它解决不了层叠顺序问题。
用了不可动画的颜色值组合
transition对颜色插值有严格要求。跨色彩模型（比如#333 → hsl(210, 20%, 30%)）或混用透明通道（#ff0000 → rgba(255,0,0,0.8)）会导致浏览器放弃平滑过渡，直接跳变。
实操建议：
- 起始和结束色都用
rgba()，确保alpha通道一致：rgba(74, 111, 165, 1)→rgba(53, 82, 126, 1) - 避免在同一个过渡中混用hex、rgb、hsl；尤其别让渐变色和纯色共存于同一
background声明 - 调试时可临时把两态颜色都改成
red和blue，确认动画是否恢复——能动说明是颜色格式问题
transition触发条件没满足
transition不是“自动播放”，它只响应**计算后属性值的变更**。JS直接改style.backgroundColor时，若旧值尚未被浏览器计算（比如DOM刚插入还没渲染），就可能跳过过渡。
常见卡点：
- 用
classList.toggle()切换class是最稳妥的，浏览器能自然捕获前后值 - JS硬编码改内联样式前，先读一次
offsetHeight强制reflow，确保旧值已就绪 - 移动端
:hover基本无效，必须配合:active或JS控制class - 按钮被
pointer-events: none或上层元素遮挡，鼠标事件根本没发出去，transition当然不启动
最隐蔽的问题：按钮父容器设置了overflow: hidden且内容溢出，导致transform缩放被裁切，看起来像“动画卡住”。这时要检查transform是否触发了新的层叠上下文，进而影响渲染边界。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
