opacity过渡不生效主因是数值未真实变化或display:none中断渲染；需确保起始/结束值明确、元素可绘制、transition声明在常态规则中，并避免与rgba混用导致透明度叠加。
transition opacity 不生效的常见原因
直接写 transition: opacity 0.3s; 却没反应？大概率是元素初始或目标状态的 opacity 值没真正“变”——比如从 opacity: 1 切到 opacity: 1，或者用了 display: none 强制中断过渡。CSS 过渡只对可动画的属性在数值变化时起作用，display 切换会直接跳帧。
- 确保触发的是
opacity数值变化（如 hover 改opacity、JS 改style.opacity），而不是靠visibility或display控制显隐 - 如果用 JS 动态设置，别用
element.style.display = 'none'后再改opacity——先设opacity: 0，等 transition 结束再设display: none - 检查是否被更高级别的样式覆盖，比如父元素有
will-change: transform但子元素 opacity 变化未声明可优化，偶尔影响渲染节奏
opacity 过渡必须搭配的 CSS 规则
opacity 本身支持过渡，但光写 transition 不够。它需要明确的起始和结束值，且元素得处于“可绘制”状态（即不为 display: none）。过渡生效的前提是：该元素已渲染、有盒模型、且 opacity 值发生数值变动。
- 必须定义初始
opacity（哪怕就是opacity: 1），否则浏览器可能按默认 1 计算，导致过渡起点不明确 -
transition最好写在常态规则里，而不是只写在:hover或.active中，否则离开时不会反向过渡 - 推荐写法：
opacity: 1; transition: opacity 0.2s ease-in-out;，然后在交互状态中改opacity: 0.4
和 rgba() 透明背景混用时的坑
用 background-color: rgba(0,0,0,0.5) 实现半透背景，再单独给整个元素加 opacity: 0.8？这会导致内容文字也变淡，而且透明度是乘性叠加（0.5 × 0.8 = 0.4），结果不可控。想只让背景渐变透明，别碰 opacity，改用 background-color 的 rgba 值过渡。
-
opacity作用于整个元素及其所有子节点，无法局部控制 - 若只需背景淡入，把
background-color从rgba(0,0,0,0.2)改成rgba(0,0,0,0.8)，并给它加transition: background-color 0.3s; - 注意：IE9 及以下不支持
rgba()的 transition，此时只能退回到opacity+ 半透 PNG 背景图
transition 时机与性能微调
默认 transition 在主线程执行，大量 opacity 动画密集触发时可能掉帧，尤其在低端 Android 或 Safari 上。不是所有场景都需要“立刻响应”，有时加一点延迟或限制触发频率更稳。
- 避免在
scroll或mousemove里频繁设置opacity——用requestAnimationFrame节流，或改用will-change: opacity提前提醒浏览器优化（但别滥用，会增加内存开销） - 时间函数选
ease比linear更自然；要强调“淡入感”，可用cubic-bezier(0.25, 0.46, 0.45, 0.94)（类似 iOS 毛玻璃入场） - 移动端要注意：Safari 对
opacity过渡的合成层提升较保守，若配合 transform 使用，建议统一写成transition: opacity 0.3s, transform 0.3s;，更容易触发 GPU 加速
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
