应优先用 opacity 实现背景透明过渡，因其插值稳定且兼容性好；若需文字不透明，则改用 rgba() 的 background-color 过渡并确保浏览器支持；避免 transition: all，必要时用 will-change 优化性能。
transition 作用于 opacity 而非 background-color
直接给 background-color 设置 rgba(0,0,0,0.5) 到 rgba(0,0,0,0) 的过渡，大多数浏览器不会触发平滑动画——因为 rgba() 是函数调用，浏览器通常只对「数值型属性」做插值计算，而 background-color 的颜色空间插值行为不统一（尤其涉及透明通道时可能跳变或失效）。
更可靠的做法是固定背景色（如 background-color: #000），单独控制透明度：
button {
background-color: #000;
opacity: 0.6;
transition: opacity 0.3s ease;
}
button:hover {
opacity: 0;
}
这样浏览器明确知道要线性插值的是 opacity 这个标量，动画稳定且兼容性好（IE9+ 支持）。
避免 opacity 影响子元素导致意外透明
opacity 是继承式透明，会把整个元素及其所有子节点一起变淡。如果你只想让背景透明、文字保持 100% 不透明，就不能用 opacity。
此时必须回到 background-color 的 rgba 值，并配合 transition ——但得加个前提：确保你用的是支持 rgba 插值的现代浏览器（Chrome 48+、Firefox 47+、Safari 9.1+、Edge 12+）：
button {
background-color: rgba(0, 0, 0, 0.6);
transition: background-color 0.3s ease;
}
button:hover {
background-color: rgba(0, 0, 0, 0);
}
常见错误是写成 transition: all 0.3s，这会让其他未预期的属性也参与过渡，增加渲染开销甚至引发闪烁。
需要同时控制背景与文字颜色？拆成两个 transition
如果 hover 时既要背景变透明，又要文字颜色变亮（比如从白色变成浅灰），不要试图塞进一个 transition：
- 用
background-color+rgba()控制背景透明过渡 - 用
color+ 单独transition: color 0.3s控制文字 - 两者可共存，浏览器会并行执行
例如：
button {
background-color: rgba(0, 0, 0, 0.7);
color: white;
transition: background-color 0.3s ease, color 0.3s ease;
}
button:hover {
background-color: rgba(0, 0, 0, 0.2);
color: #ccc;
}
性能敏感场景下优先用 will-change
如果该元素频繁切换（比如悬停菜单项很多、或在滚动区域中），加上 will-change: opacity 或 will-change: background-color 可提示浏览器提前优化合成层：
button {
will-change: opacity;
/* 或 */
/* will-change: background-color; */
}
注意：will-change 不是万能加速器，滥用反而降低性能；只在真实存在卡顿且已确认是重绘瓶颈时才加。
真正容易被忽略的是：opacity 动画会强制触发整个图层的重绘，而 background-color + rgba 在部分旧版 Safari 中仍可能闪动——遇到这类问题，最终解法往往是改用伪元素叠加背景层，把透明变化限制在独立渲染上下文中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
