opacity过渡需显式声明transition: opacity而非all，配合visibility或pointer-events防误点，避免display:none，禁用rgba替代，仅修改opacity和transform以保性能。
transition 作用于 opacity 属性时必须显式声明
直接写 transition: all 0.3s 不一定能触发 opacity 渐变，尤其在元素初始状态为 opacity: 0 且未渲染时。浏览器可能跳过过渡，直接显示最终值。
- 务必指定
transition: opacity 0.3s ease，避免依赖all - 确保起始和结束状态都明确设置了
opacity值（不能靠继承或未定义） - 如果元素用
display: none控制显隐，transition 完全失效——改用visibility或控制opacity+pointer-events
opacity 过渡需配合 visibility 或 pointer-events 防止误点
opacity: 0 的元素仍占据布局空间、响应点击事件。单纯渐隐后用户可能点到“看不见但存在”的元素上。
- 淡出完成时加
visibility: hidden；淡入开始前先设为visibility: visible - 更轻量的做法：用
pointer-events: none配合 opacity 动画，例如：
button {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s, pointer-events 0s 0.2s;
}
button.show {
opacity: 1;
pointer-events: auto;
transition: opacity 0.2s, pointer-events 0s;
}
不要用 rgba() 的 alpha 通道替代 opacity 做过渡
虽然 background-color: rgba(0,0,0,0.5) 和 opacity: 0.5 视觉相似，但行为完全不同：
-
opacity影响整个元素及其子树，支持过渡，且会继承父级透明度叠加 -
rgba()只影响当前属性，过渡只改变颜色通道，无法实现子元素整体淡入淡出 - 若对多个属性（如背景+文字）分别用 rgba 控制透明度，维护成本高且易不同步
动画卡顿？检查是否触发了重排（reflow）
opacity 是 CSS 合成属性（compositing property），理论上只触发重绘（repaint），性能好。但如果同时修改了 width、height、top 等布局属性，就会强制重排，导致掉帧。
立即学习“前端免费学习笔记（深入）”；
- 确保只动
opacity和transform（如translateY）这类可被 GPU 加速的属性 - 必要时加
will-change: opacity提示浏览器提前优化，但仅在复杂场景下启用，避免滥用 - 用 Chrome DevTools 的 Rendering 面板勾选 “Paint flashing” 和 “FPS meter”，验证是否真正在合成层执行
opacity 渐变看似简单，真正稳定运行要同时处理状态切换时机、交互可用性、属性作用域和渲染管线这几个层面。漏掉任意一环，就可能出现闪现、卡顿或点不到的问题。