使用CSS transition可实现平滑主题切换，通过变量与类控制颜色、布局变化，结合cubic-bezier动画曲线和GPU加速属性如transform、opacity，提升用户体验并注意prefers-reduced-motion兼容性。
在多主题切换中，CSS 过渡（transition）能显著提升用户体验，让界面颜色、布局或元素状态的变化更自然流畅。通过合理使用 transition 属性，可以避免生硬的跳变，实现平滑的主题动画效果。
颜色与背景的渐变过渡
主题切换通常涉及文字颜色、背景色、边框等视觉属性的变化。直接切换会导致视觉突兀，加入过渡可缓解这一问题。
示例：为全局可变属性添加过渡
body {background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.3s ease, color 0.3s ease;
}
只要 CSS 变量（如 --bg-color）被 JavaScript 或类名更改，浏览器会自动触发过渡动画。这种做法适用于深色/浅色模式切换。
立即学习“前端免费学习笔记（深入）”；
使用类控制主题状态
通过给 body 或根元素添加不同的类（如 .theme-dark、.theme-light），结合 CSS 变量和 transition，可集中管理主题样式。
:root {
--bg-color: #fff;
--text-color: #333;
}
.theme-dark {
--bg-color: #1a1a1a;
--text-color: #f5f5f5;
}
- {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
JavaScript 切换类时，所有绑定变量的属性都会以定义的缓动函数平滑变化。cubic-bezier 曲线能让动画更自然。
过渡复杂组件的显示效果
除了颜色，按钮、卡片、导航栏等组件在主题切换时也可加入过渡。例如阴影、边框圆角、透明度等属性都支持 transition。
常见做法：
- 对 box-shadow 使用过渡，使卡片“浮起”或“下沉”更柔和
- 用 opacity 和 transform 实现图标的淡入淡出或缩放
- 设置 transition-delay 错开多个元素的动画顺序，营造层次感
性能与兼容性提示
CSS 过渡性能良好，但需注意以下几点：
- 优先过渡 transform 和 opacity，它们由 GPU 加速，不会触发重排
- 避免对 width、height、margin 等频繁引起重排的属性做长时间过渡
- 在低版本浏览器中降级处理，可通过 prefers-reduced-motion 检测用户偏好
- 切换主题时批量修改类，而非逐个改内联样式，防止多次重绘
基本上就这些。合理利用 CSS transition，配合变量和类切换，就能实现既美观又高效的多主题动画体验。不复杂但容易忽略细节。
