记录是如何通过View Transitions API 实现主题切换时的过渡效果
2026-02-21
杂乱的知识
type
Post
status
Published
date
Feb 21, 2026
slug
view-transitions-api-theme-switch-transition-notes
summary
记录如何使用 View Transitions API 实现从按钮位置向外圆形扩散的主题切换动画效果。这种效果不会遮挡页面元素，交互体验流畅自然。可以点击本站上的日夜间主题切换试试看.
tags
开发
实用教程
category
杂乱的知识
icon
password
记录如何使用 View Transitions API 实现从按钮位置向外圆形扩散的主题切换动画效果。这种效果不会遮挡页面元素，交互体验流畅自然。可以点击本站上的日夜间主题切换试试看.
View Transitions API 的核心原理，本质上就是“截图 + 过渡动画”机制。可以理解成你截了一张图放在站点上.
浏览器兼容性
浏览器 | 版本要求 |
Chrome | 111+ |
Edge | 111+ |
Opera | 97+ |
Safari | 暂不支持 |
Firefox | 暂不支持 |
降级方案：不支持 View Transitions API 的浏览器会自动降级为直接切换主题。
实现步骤
1. 创建主题切换按钮组件
2. 添加 CSS 样式
在主题的全局样式文件中添加以下 CSS：
3. 在 Header 中使用组件
关键 API 说明
document.startViewTransition()
作用：启动视图过渡动画，浏览器会自动捕获当前视图状态，执行过渡，然后更新到新的视图状态。
参数：
callback: 在动画帧中执行的回调函数，通常包含 DOM 更新操作
返回值：
ViewTransition对象，包含以下属性：ready: Promise，表示过渡准备就绪finished: Promise，表示过渡完成updateCallbackDone: Promise，表示更新回调完成
clip-path: circle()
作用：创建圆形裁剪区域，实现从按钮位置向外扩散的效果。
语法：
参数：
radius: 圆形半径（百分比或像素）
x: 圆心 X 坐标
y: 圆心 Y 坐标
::view-transition-new() / ::view-transition-old()
作用：伪元素，分别表示过渡后的新视图和过渡前的旧视图。
语法：
可配置参数
动画持续时间
建议范围：800ms - 1500ms
- 800ms：较快的切换
- 1200ms：舒缓的切换（推荐）
- 1500ms：缓慢的切换
缓动函数
常用缓动函数：
'ease': 标准缓动
'ease-in-out': 平滑开始和结束
'cubic-bezier(0.4, 0, 0.2, 1)': Material Design 标准缓动（推荐）
'cubic-bezier(0.34, 1.56, 0.64, 1)': 弹性效果
注意事项
- 不要遮挡元素：View Transitions API 是浏览器原生实现，不会创建额外的 DOM 元素遮挡页面内容。
- 性能优化：
- 动画使用 GPU 加速
- 仅在支持该 API 的浏览器中启用
- 尊重用户的
prefers-reduced-motion设置
- 降级处理：始终提供降级方案，确保在不支持的浏览器中也能正常使用。
- 主题切换时机：
- 在
startViewTransition的回调中执行主题切换 - 浏览器会自动处理新旧视图的过渡
- 扩散中心计算：
- 使用
getBoundingClientRect()获取按钮位置 - 计算按钮中心作为扩散起点
- 计算到屏幕最远角的距离作为扩散半径
完整代码实现位置
- 组件：
themes/anime/components/ThemeToggleButton.js
- 样式：
themes/anime/style.js(View Transitions CSS 部分)
Loading...