CSS transition 属性定义元素状态变化时的动画行为，其关键在于在初始状态（非伪类）中声明过渡规则；重复写在 :hover 中虽可实现不对称过渡，但非常规用法，且易引发维护困惑。
css `transition` 属性定义元素状态变化时的动画行为，其关键在于**在初始状态（非伪类）中声明过渡规则**；重复写在 `:hover` 中虽可实现不对称过渡，但非常规用法，且易引发维护困惑。
CSS 的 transition 是一个复合属性，用于控制元素在不同状态之间切换时的动画效果，由四个核心子属性组成：transition-property、transition-duration、transition-timing-function 和 transition-delay。其本质是对可计算样式值发生变化时的插值动画——即当某个 CSS 属性的值在两个状态（如默认态与 :hover 态）之间发生改变，且该属性支持动画（如 color、opacity、transform），浏览器便会自动补全中间帧，形成平滑过渡。
✅ 正确写法：在基础选择器中定义 transition
.navbar__links {
color: #fff;
width: 125px;
text-decoration: none;
transition: color 0.3s ease; /* 推荐：明确指定要过渡的属性 */
}
.navbar__links:hover {
color: #9518fc;
}
✅ 优势说明：
- 过渡规则统一、可预测：进入（hover）和离开（unhover）均使用相同的持续时间与缓动函数；
- 符合语义直觉：transition 描述的是“从当前状态到目标状态”的过程，理应由起始状态决定如何过渡；
- 更易维护：避免在多个伪类中重复或冲突地定义 transition，降低出错风险。
⚠️ 为什么 :hover 中再写 transition 看不出区别？
在你提供的两个代码片段中，transition: all 0.3s ease 在 .navbar__links 和 .navbar__links:hover 中完全一致，因此浏览器无论从「默认 → hover」还是「hover → 默认」，都应用相同参数，视觉上毫无差异。
但若刻意差异化（如将 :hover 中设为 1.3s），则会出现不对称过渡（asymmetric transitions）：
.navbar__links {
color: #fff;
transition: color 0.3s ease; /* 离开时快：0.3s */
}
.navbar__links:hover {
color: #9518fc;
transition: color 1.3s ease; /* 进入时慢：1.3s */
}
此时：
- 鼠标移入 → 淡入变色耗时 1.3 秒（由 :hover 规则生效）；
- 鼠标移出 → 快速恢复原色仅需 0.3 秒（回退至基础规则）。
这种技巧可用于强调用户操作（如悬停强调）、营造轻量反馈（快速退出），但应谨慎使用——过度不对称易破坏交互一致性，且增加调试复杂度。
? 注意事项与最佳实践
避免 transition: all：它会尝试对所有可变属性（包括 box-shadow、font-size、甚至意外继承的 margin）启用过渡，不仅性能开销大，还可能导致不可预期的动画（如布局抖动）。✅ 始终显式声明 transition-property，例如 transition: color 0.3s, background-color 0.3s。
并非所有属性都可过渡：display、height（当值为 auto）、position（static ↔ fixed）等无法插值的属性不支持 transition；推荐优先使用 opacity、transform（GPU 加速）、color 等高性能可动画属性。
触发时机依赖“样式变更”：transition 不会因 JS 修改 class 或内联样式而自动播放，除非新旧状态间存在可计算样式的实质性差异（如 color: red → color: blue）。若通过 JS 动态添加 class 却无反应，请检查是否遗漏了基础 transition 声明。
? 总结
| 场景 | 推荐做法 |
|---|---|
| 常规悬停效果 | 仅在基础选择器（如 .navbar__links）中声明 transition |
| 特殊交互动效 | 可在 :hover/:focus 等伪类中覆盖 transition 实现不对称动画，但需明确设计意图并充分测试 |
| 性能与可维护性 | 使用具体属性名替代 all；优先选用 transform/opacity；避免过渡布局属性 |
掌握 transition 的本质——它是起始状态对“如何到达下一个状态”的声明，而非终点状态的承诺——才能写出清晰、高效、可扩展的 CSS 动画逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
