本文详细介绍了基于Web View Transitions API实现的主题切换动画技术。通过圆形扩散/收缩动画效果，从用户点击位置作为动画圆心，提供流畅的主题切换体验。文档涵盖了核心技术原理、实现架构、详细代码实现、CSS动画样式、使用指南和浏览器兼容性等内容。该方案采用渐进增强策略，支持无障碍访问，在不支持View Transitions API的浏览器中优雅降级，为现代Web应用提供了高质量的主题切换解决方案。
https://www.youtube.com/watch?v=dQw4w9WgXcQ
本文档详细介绍了基于 Web View Transitions API 实现的主题切换动画效果。该实现通过圆形扩散/收缩动画，提供了流畅的主题切换体验，支持从点击位置作为动画圆心的交互效果。
View Transitions API 是现代浏览器提供的原生动画 API，允许开发者在 DOM 状态变化时创建平滑的过渡效果。
核心概念：
document.startViewTransition(): 启动视图过渡::view-transition-old(): 旧状态的伪元素::view-transition-new(): 新状态的伪元素主题切换动画通过以下步骤实现：
ThemeSwitcher/index.tsx)关键实现要点：
handleThemeClick 函数接收点击事件，用于获取点击坐标next-themes 管理主题状态useIsClient Hook 避免 SSR 不一致问题flushSync 确保 DOM 同步更新utils/dom.ts)关键实现要点：
prefers-reduced-motion 偏好设置clientX/clientY 获取点击位置Math.hypot 计算到屏幕边缘的最大距离hooks/use-is-client.ts)作用：
globals.css)CSS 动画解析：
基础设置：
亮色主题切换：
暗色主题切换：
动画参数：
--x, --y：动画圆心坐标--r：动画半径0.7s ease-out：动画时长和缓动函数prefers-reduced-motion: reduce 时禁用动画prefers-reduced-motion 设置clientX/clientY 而非 pageX/pageYtransform 影响坐标计算useIsClient Hookhtml 标签添加 suppressHydrationWarning该主题切换动画实现具有以下特点：
优势：
技术亮点：
该实现为现代 Web 应用提供了一个高质量的主题切换解决方案，可以直接应用到生产环境中。