transition必须写在使用变量的元素上而非:root，因CSS不支持对自定义属性本身过渡；需为每个被变量赋值的原生属性（如background-color）单独声明transition，并统一颜色格式（推荐rgb/hsl）以避免闪烁。
transition 必须写在使用变量的元素上，不能写在 :root 或主题类里
很多人一上来就在 :root 里加 transition: --primary-color 0.3s，结果完全没动画——CSS 标准根本不支持对自定义属性本身做过渡。浏览器无法插值两个 var(--x) 的中间状态。
真正起作用的是被变量“落地”的原生属性，比如 background-color、color。所以 transition 必须显式写在这些属性所在的元素选择器里：
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
-
transition要覆盖所有会变的属性，漏一个就会卡顿或跳变 - 别用
transition: all 0.3s，可能意外触发 layout 重排，尤其在滚动或动画中 - 如果只给
button加了 transition，但body没加，切换时背景还是突变
颜色格式不统一是闪烁的最常见原因
从 #ffffff 切到 hsl(210, 10%, 10%)，或从 rgba(0,0,0,1) 切到 black，浏览器无法插值，直接硬切，看起来就是“闪一下”。
解决方法很简单：全站主题色统一用一种格式，推荐 rgb() 或 hsl()，避免混用 hex、named color、hsla 等：
立即学习“前端免费学习笔记（深入）”；
:root {
--bg-color: rgb(255, 255, 255);
--text-color: rgb(51, 51, 51);
}
.root.dark {
--bg-color: rgb(26, 26, 26);
--text-color: rgb(221, 221, 221);
}
- 用 DevTools 的 Computed 面板检查切换前后
background-color解析出的实际值，确认是否同为rgb() - 透明度变化必须用
rgba()或hsla()，别靠opacity模拟，语义和性能都不对 - 系统级暗色模式（
@media (prefers-color-scheme: dark)）也要保持同一套颜色格式，否则自动切换也会闪
切换 class 比直接 setProperty 更可靠
用 JavaScript 直接改 document.documentElement.style.setProperty('--bg-color', '...') 看似简单，但容易导致过渡失效：变量变了，但浏览器不一定立刻重绘对应属性；而且 localStorage 恢复、服务端渲染等场景下，逻辑难收敛。
更健壮的做法是预设主题类（如 .dark），仅通过 classList.toggle() 控制：
const toggleBtn = document.getElementById('themeToggle');
toggleBtn.addEventListener('click', () => {
document.documentElement.classList.toggle('dark');
localStorage.setItem('theme', document.documentElement.classList.contains('dark') ? 'dark' : 'light');
});
- 初始化时优先读
localStorage，再同步 class，避免 FOUT（Flash of Unstyled Text） - 用
data-theme属性代替 class 也行，但语义上 class 更贴合“外观状态”，且兼容性更好 - 不要在切换瞬间同时操作多个 class 或触发 layout 强制刷新，会打断 transition 流程
body 上的 transition 不会自动继承到子元素
你给 body 写了 transition: background-color 0.3s，不代表所有子元素的颜色都会动。每个要用动画的组件都得单独声明：
button {
background-color: var(--primary-color);
transition: background-color 0.3s ease;
}
.card {
background-color: var(--card-bg);
transition: background-color 0.3s ease;
}
- 组件库或通用 UI 组件必须显式支持 transition，不能只依赖父级
- 伪元素（如
::before）若用了变量，也要单独加 transition，它不继承父元素的 transition 声明 - 动画卡顿往往不是因为 JS 慢，而是某个关键组件漏写了 transition，导致局部突变破坏整体观感
