页面刷新后css transition闪烁的根源是fouc，即html先用默认样式渲染，等js读取localstorage并切换data-theme后才应用主题变量，造成视觉断层；transition未生效因主题类添加过晚，需在内联脚本中立即设置data-theme；css变量本身不可过渡，应改用class切换或仅对opacity、transform等可动画属性做过渡。
页面刷新后CSS transition闪烁的根源是FOUC
这不是transition写错了，而是浏览器渲染顺序导致的“未样式化内容闪现”（FOUC）：HTML先被解析并用默认样式渲染，等JS执行完、读取localStorage、切换data-theme后，才应用深色/浅色主题变量，中间存在100ms左右的视觉断层。
transition没生效是因为主题类加得太晚
常见错误是把主题切换逻辑放在DOMContentLoaded或window.onload里——这时DOM已渲染完毕，data-theme属性变更触发的是第二次重绘，而非过渡起点。transition需要在首次渲染前就“知道”目标状态。
- ✅ 正确做法：在
里放内联IIFE脚本，立即读取localStorage.getItem('theme')并设置document.documentElement.setAttribute('data-theme', ...) - ❌ 错误写法：
document.addEventListener('DOMContentLoaded', () => { ... })——晚了至少一个渲染帧 - ⚠️ 注意：如果主题依赖服务端Cookie，必须用SSR或HTTP头提前注入
data-theme，否则客户端JS永远追不上首屏渲染
即使加了transition，CSS变量变化仍可能跳变
var(--bg)这类自定义属性本身不支持过渡，浏览器对它们的更新是原子性的。单纯给background-color: var(--bg)加transition无效，因为变量值切换不触发属性插值。
- ✅ 解决方案：用CSS class切换代替纯变量驱动，例如
.theme-light { --bg: #fff; }和.theme-dark { --bg: #000; }，再对class切换加transition（需配合opacity或transform等可动画属性） - ✅ 或者：只对真正可过渡的属性（如
opacity、transform）做动画，主题色变化接受“瞬时切换”，视觉上更自然 - ⚠️ 避免
transition: all 0.3s——它不会让color或background-color平滑过渡，反而增加无效计算
真机上更易闪，因为硬件加速策略不同
桌面Chrome可能看不出问题，但iOS Safari或安卓WebView中，CSS变量更新+重绘的组合更容易触发图层降级，导致整页重绘而非局部合成。
- ✅ 在主题根元素上加
will-change: background-color（仅限切换频繁的场景） - ✅ 或更稳妥地：给
:root加transform: translateZ(0)强制创建合成层（注意不要影响布局） - ⚠️ 不要对整个
body加will-change——移动端GPU显存有限，容易引发滚动卡顿
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
