transition必须写在body等基础选择器中，而非仅.dark类内，否则默认无过渡声明会导致闪屏；所有过渡属性需两端明确赋值，css变量不可直接过渡，须作用于展开后的具体属性，推荐显式声明background-color、color等关键属性并配合合理缓动与时长。
transition 必须写在 body 基础选择器里，不能只放在 .dark 类中
浏览器只对「从一个明确值变到另一个明确值」的属性做过渡。如果 transition 只写在 .dark-theme 或 [data-theme="dark"] 里，那默认状态下没有过渡声明，切换时就会瞬间跳变——这就是“闪屏”的直接原因。
正确做法是把 transition 放在 body（或 html）的基础规则中：
body {
background-color: #ffffff;
color: #333333;
transition: background-color 0.35s ease, color 0.35s ease;
}
body.dark-theme {
background-color: #121212;
color: #e0e0e0;
}
所有参与过渡的属性必须在两端都定义具体值，避免用 transparent、inherit 或 currentcolor 作为其中一端，否则可能插值失败或行为不可控。
用 CSS 变量时，transition 不能写在 :root 里
:root 中定义的变量（如 --bg-color）本身不触发重绘，改它们的值不会触发 transition。你写 transition: --bg-color 0.3s 是无效的——CSS 变量不可被直接过渡。
真正起作用的 transition 必须写在使用这些变量的元素上，且针对展开后的属性：
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.35s ease, color 0.35s ease;
}
如果你用多个组件（按钮、卡片、标题）都依赖同一组变量，有两条路可选：
- 每个用到变量的地方都加一遍
transition - 统一加一个工具类（如
.theme-transition），再批量应用
避免 transition: all 导致意外动画或性能问题
transition: all 0.3s 看似省事，但会把所有可动画属性（比如 box-shadow、transform、opacity）都拉进过渡队列，容易引发意料外的动效或布局抖动。
推荐显式声明关键属性：
-
background-color和color是深色模式切换的核心 - 若用了边框或阴影，也一并加入：
border-color 0.35s ease, box-shadow 0.35s ease - 缓动函数建议用
cubic-bezier(0.25, 0.46, 0.45, 0.94)，比默认ease更柔和 - 时长控制在 300–400ms 最佳；超过 450ms 容易感知延迟，低于 200ms 则像卡顿
JS 切换 data-theme 后，部分元素没过渡？检查这三点
即使写了 transition，仍可能看到某些文字或背景没动、闪一下、或者延迟动。常见原因：
- 目标元素没显式声明
background-color或color，而是靠继承——继承值变更不会触发过渡，需补上background-color: var(--bg-color)这类明确赋值 - 用了
will-change: transform等优化，却干扰了颜色过渡，建议只在必要时加，且避免滥用 - 样式优先级写错，比如
[data-theme="dark"] .card的规则权重高于基础.card，导致基础规则里的transition被覆盖
最稳妥的做法：把 transition 写在最高层容器（如 body）上，并确保所有子元素的颜色相关属性都被显式设置（哪怕只是重复变量引用）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
