通过 CSS 自定义属性（CSS Variables）动态控制 transition 的各个分项，可让 hover、类切换、伪类等不同触发条件下的过渡效果互不干扰、并行生效。
通过 css 自定义属性（css variables）动态控制 `transition` 的各个分项，可让 hover、类切换、伪类等不同触发条件下的过渡效果互不干扰、并行生效。
在实际开发中，我们常需为同一元素设置多种交互状态下的过渡效果（例如：悬停时变色、勾选复选框时改变尺寸、点击时圆角变化等）。但若直接在不同选择器中分别声明 transition，后声明的规则会完全覆盖前一个——因为 CSS 中 transition 是一个整体可继承的简写属性，而非按属性名合并的叠加值。
例如，当 #square:hover 设置了 transition: background-color 400ms，而 #toggleWidth:checked ~ #square 又设置了 transition: width 500ms，后者会彻底取代前者，导致悬停时失去颜色过渡。
✅ 正确解法：将 transition 拆分为多个独立变量，并在根元素统一声明组合式 transition
#square {
--transition-width: width 0s;
--transition-height: height 0s;
--transition-bg: background-color 0s;
--transition-radius: border-radius 0s;
border: 1px solid black;
width: 50px;
height: 50px;
transition:
var(--transition-width),
var(--transition-height),
var(--transition-bg),
var(--transition-radius);
}
#square:hover {
background-color: orange;
--transition-bg: background-color 400ms ease;
}
#toggleWidth:checked ~ #square {
width: 100px;
--transition-width: width 500ms ease;
}
#toggleHeight:checked ~ #square {
height: 100px;
--transition-height: height 600ms ease;
}
#toggleBorderRadius:checked ~ #square {
border-radius: 10px;
--transition-radius: border-radius 300ms ease;
}
? 关键原理：
- 所有
transition子项统一在#square根规则中通过var()组合声明，确保浏览器始终“看到”完整的过渡列表； - 各状态选择器仅修改对应 CSS 变量的值（如
--transition-bg），不触碰其他变量，因此不会覆盖其他过渡行为； - 初始设为
0s可避免无意义的默认过渡，提升性能与可控性。
⚠️ 注意事项：
- CSS 变量具有继承性与层叠性，必须在目标元素（此处为
#square）上定义并使用，不可在父容器中定义后期望子元素自动应用； - 不支持
transition: all混用——若需精确控制，务必显式列出每个参与过渡的属性，避免意外动画； - 浏览器兼容性良好（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 15+），现代项目可放心使用。
总结：用 CSS 变量解耦 transition 的声明与控制逻辑，是实现多状态、多属性、非冲突过渡的最佳实践。它既保持了纯 CSS 方案的轻量与性能优势，又具备类似 JavaScript 动态管理的灵活性。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
