17370845950

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 渐变看似简单，真正稳定运行要同时处理状态切换时机、交互可用性、属性作用域和渲染管线这几个层面。漏掉任意一环，就可能出现闪现、卡顿或点不到的问题。