css变量本身不可动画，transition必须作用于color、background-color等原生属性而非变量名；需统一颜色格式，并将transition声明在使用变量的元素上。
transition 不能直接用于页面切换动画，它只适用于单元素状态变化；真正可用的方案是 animation + 状态类名，或浏览器原生的 document.startViewTransition()。选错方案会导致动画不触发、闪屏、卡顿甚至静默失败。
为什么直接给 :root 变量加 transition 没用？
因为 CSS 标准明确禁止对自定义属性（如 --bg、--text）做过渡——transition 只支持原生可插值属性（color、opacity、transform 等）。哪怕你写了：
:root { --bg: #fff; transition: --bg 0.3s; }
.theme-dark { --bg: #121212; }
这段代码在所有稳定版浏览器里都不会动。浏览器连“该不该动”都不知道，更不会调度重绘帧。
- 错误做法：改一堆
--xxx变量后等transitionend—— 事件根本不会触发 - 正确思路：变量只是中间值，动画必须落在使用它的实际属性上，比如
background-color: var(--bg)，且transition要写在该元素上 - 但页面级主题切换仍建议绕过
transition，改用view transitions或animation控制整页行为
document.startViewTransition() 必须同步执行 DOM 更新
这不是“加个动效”的补丁，而是强制要求你把 DOM 变更包进回调里，且更新必须同步完成：
- ✅ 正确：点击后立刻切换
document.documentElement.classList或data-theme - ❌ 错误：先发请求加载新 CSS，再异步插入
<link>，最后改 class —— 会抛InvalidStateError或静默失败 - ⚠️ 框架用户注意：React/Vue 中必须确保 DOM 更新发生在
startViewTransition回调内，不能依赖状态驱动的异步渲染周期
简单示例：
button.addEventListener('click', () => {
document.startViewTransition(() => {
document.documentElement.classList.toggle('theme-dark');
});
});
用 animation 实现页面切换时，类名时机和属性选择最关键
核心不是写动画，而是控制「谁在什么时候播什么」：
- 动画必须绑定在带语义的状态类上，比如
.page-enter-active、.page-leave-active，不能直接写在.page上 - 务必加
animation-fill-mode: both，否则动画结束瞬间opacity或transform会回退到初始值 - @keyframes 里只用
opacity、transform（translateX、scale），避免height、top触发 Layout 卡顿 - 快速连点导航时，旧页面的
.page-leave-active类必须由 JS 手动移除，CSS 不会自动清理
例如滑入动画：
@keyframes slideInRight {
from { opacity: 0; transform: translateX(100%); }
to { opacity: 1; transform: translateX(0); }
}
.page-enter-active {
animation: slideInRight 0.3s ease-out;
animation-fill-mode: both;
}
局部区域动画要用命名过渡，别硬套 ::view-transition-old(root)
::view-transition-old(root) 和 ::view-transition-new(root) 只对 html 元素生效，想控制某个卡片或侧边栏的切换，必须用命名过渡：
- JS 中调用
document.startViewTransition({ name: 'card-transition' }) - CSS 中用
::view-transition-old(card-transition)和::view-transition-new(card-transition) - 不能写成
.card ::view-transition-old—— 浏览器会忽略这种组合选择器
命名过渡是 View Transitions API 唯一支持局部控制的方式，全局伪元素只是兜底入口。
真正容易被忽略的是：View Transitions 目前仅在 Chromium 115+ 稳定支持，Safari 和 Firefox 尚未启用。如果需要兼容，animation + 状态类仍是更稳妥的选择，但得自己处理 z-index 层叠和动画冲突逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
