使用View Transition api给模式切换添加过渡动画

什么是 View Transition API

View Transition API 是 Chrome 推出的一项新特性，它允许开发者在 DOM 状态变化时创建平滑的过渡动画。与传统的 CSS 动画不同，它能够在页面元素变化前后捕获快照，并自动计算差异进行插值动画。

基础实现

首先，我们需要一个切换按钮和基本的样式结构：html

<button id="theme-toggle">切换模式</button> 

:root { --bg-color: #ffffff; --text-color: #333333; } [data-theme="dark"] { --bg-color: #1a1a1a; --text-color: #e0e0e0; } body { background-color: var(--bg-color); color: var(--text-color); transition: background-color 0.3s, color 0.3s; }

添加 View Transition 动画

核心代码非常简单，只需要在切换主题时调用 document.startViewTransition：

const toggleBtn = document.getElementById('theme-toggle'); const html = document.documentElement; toggleBtn.addEventListener('click', async (e) => { // 检查浏览器是否支持 View Transition API if (!document.startViewTransition) { toggleTheme(); return; } // 获取点击位置，作为动画起点 const x = e.clientX; const y = e.clientY; // 创建圆形扩散动画 const transition = document.startViewTransition(() => { toggleTheme(); }); await transition.ready; // 自定义动画效果 const clipPath = [ `circle(0% at ${x}px ${y}px)`, `circle(150% at ${x}px ${y}px)` ]; document.documentElement.animate({ clipPath: html.dataset.theme === 'dark' ? clipPath.reverse() : clipPath }, { duration: 500, easing: 'ease-in-out', pseudoElement: '::view-transition-new(root)' }); }); function toggleTheme() { const currentTheme = html.dataset.theme; html.dataset.theme = currentTheme === 'dark' ? 'light' : 'dark'; }

进阶技巧

1. 为特定元素添加独立过渡css

::view-transition-old(header), ::view-transition-new(header) { animation-duration: 0.3s; }

2. 处理不支持 API 的浏览器

if (!document.startViewTransition) { // 降级方案：使用普通 CSS 过渡 toggleTheme();}

3. 性能优化

View Transition API 会自动处理大部分性能优化，但我们应该避免在过渡期间执行复杂计算。

浏览器兼容性

目前 View Transition API 在 Chrome 111+ 和 Edge 111+ 中得到支持。对于其他浏览器，建议提供渐进增强方案。

总结

View Transition API 极大地简化了复杂页面过渡动画的实现。通过简单的几行代码，我们就能为日夜模式切换添加专业级的动画效果。随着浏览器支持度的提升，这项技术必将成为 Web 动画的标准方案。