Vue3动画进阶如何使用 Vue3 的 CSS 变量驱动过渡动画
Vue3不直接驱动CSS变量动画，而是通过控制data-theme等开关，由CSS变量承载设计Token，再用transition声明可动画属性（如color、background-color）实现平滑过渡；需确保变量映射到原生可过渡属性并显式声明transition。
Vue3 本身不直接“驱动” CSS 变量的动画，但可以完美配合 CSS 变量 + CSS transition 实现响应式、主题化、状态可控的过渡动画。关键在于：用 Vue 控制变量开关（如 data-theme 或 class），由 CSS 变量承载设计 Token，再靠 transition 声明哪些变量值变化时需要平滑过渡。
用 data-theme 切换暗黑/亮色主题并过渡颜色
这是最典型的 CSS 变量驱动过渡场景。核心不是 Vue 写动画逻辑，而是让 Vue 触发 class 变更，交由 CSS 完成过渡。
- 在
<html>根节点动态绑定data-theme：<html :data-theme="theme">，其中theme是 ref（如ref('light')） - 在 CSS 中定义两套变量，并统一声明过渡属性：
:root { --bg: #fff; --text: #333; transition: background-color 0.4s, color 0.4s; }[data-theme="dark"] { --bg: #1e1e1e; --text: #eee; } - 所有用到颜色的地方写成：
background-color: var(--bg); color: var(--text); - 切换
theme值时，CSS 变量自动更新，浏览器根据transition插值渲染渐变效果
用 CSS 变量控制可动画的样式属性
CSS 变量本身不能被 transition 直接监听，但你可以把变量“映射”到支持过渡的原生属性上。
- ✅ 支持过渡的属性包括：
color、background-color、opacity、transform、font-size等 - ❌ 不支持直接过渡：
--primary-color这类自定义变量（浏览器无法插值） - 正确做法是：用变量赋值给可过渡属性
.card { background-color: var(--card-bg); transition: background-color 0.3s ease-out; } - Vue 更新
--card-bg的值（通过 class 切换或 style 绑定），CSS 自动触发过渡
配合 Vue 的 transition 组件做状态级过渡
当需要对组件显隐、列表项增删等做动画时，CSS 变量可作为“配置层”，而 <Transition> 提供语义化钩子。
- 例如：用变量控制淡入淡出的透明度阈值
.fade-enter-from { opacity: var(--fade-start, 0); }.fade-enter-active { transition: opacity var(--fade-duration, 0.25s) ease-out; } - 在 setup 中动态修改全局变量（如通过
document.documentElement.style.setProperty）来微调整站过渡节奏 - 避免在每个组件里硬编码数值，用变量统一管理动画参数，提升可维护性
注意边界：哪些变量变化能真正过渡
不是所有用了 CSS 变量的地方都能看到动画，必须满足三个条件：
- 变量最终被用于一个「原生可过渡属性」（如
color，而非display或z-index） - 该属性在 CSS 中明确写了
transition（且未被!important或其他规则覆盖） - 变量值变化是同步触发的（比如 class 切换、style 绑定），而不是异步延迟设置
- 浏览器兼容性：Chrome 110+、Firefox 115+、Safari 16.4+ 对 CSS 变量 + transition 支持稳定；旧版 Safari 需降级 fallback
