为什么CSS transition在深色模式切换时会闪屏？

作者：袖梨 2026-09-02

闪屏源于transition未在基础选择器中声明、CSS变量未早期就位、Safari图层不稳定及第三方库冲突；需全局声明transition、内联JS同步设data-theme、双条件覆盖、加transform优化、避免display切换、实机验证并提高选择器优先级。

闪屏不是 transition 写错了，而是浏览器根本没机会对颜色做插值动画——它看到的是「从无过渡声明 → 突然换颜色」，只能硬切。

transition 只写在 .dark-theme 类里必然闪

常见错误是只在深色类中加 transition：

body.dark-theme {background-color: #121212;transition: background-color 0.3s;}

这样 body 默认状态没有 transition 声明，切换 class 时：浏览器先按默认样式（比如 background-color: #ffffff）渲染一帧，再瞬间套上新颜色，中间没有过渡过程。

  1. 必须把 transition 写在基础选择器里，比如 body、button 或 :root 的初始规则中
  2. 不能只靠变量切换来触发动画；transition 必须作用于具体属性（如 background-color），不是 --bg-color 这种自定义属性
  3. 哪怕用了 var(--bg-color)，也要确保两端都是可动画的明确值，比如 #ffffff ↔ #121212

首帧闪屏源于 CSS 变量未在 HTML 解析早期就位

仅靠 @media (prefers-color-scheme: dark) 定义变量，首次渲染必闪。因为媒体查询匹配发生在样式表解析后期，而浏览器已经用默认值（通常是浅色）完成首帧绘制。

  1. 必须在 <head> 最上方内联 JS 同步读取 window.matchMedia('(prefers-color-scheme: dark)') 并立刻设置 document.documentElement.setAttribute('data-theme', 'dark')
  2. 不能 defer，不能用 module，不能等 DOMContentLoaded
  3. 所有颜色规则要同时覆盖两套：[data-theme="dark"] + @media (prefers-color-scheme: dark)，缺一不可
  4. 每个 var() 调用都得带 fallback：background-color: var(--bg, #ffffff)

Safari 和部分 WebView 中图层未稳定也会闪

即使 transition 和变量都写对了，Safari 仍可能因合成图层反复重建导致白边、抖动或文字闪烁。

  1. 在正在动画的元素上加 transform: translateZ(0); backface-visibility: hidden;，顺序不能颠倒
  2. 不要加在父容器上——该属性不继承，只对当前元素生效
  3. 避免在动画中动态添加/移除 display: none 或 visibility: hidden；改用 opacity + transform 控制显隐
  4. 真机测试比 DevTools 准得多；iOS WebView 的图层策略和桌面 Safari 不同，务必实机验证

最易被忽略的一点：第三方 UI 库（如 Ant Design、Bootstrap）自带主题机制，它们往 :root 写变量或加 class 的行为，会和你的 [data-theme] 规则打架。覆盖时必须提高选择器优先级，且绝不能用 !important 切断变量链。

相关文章

精彩推荐