View Transitions API（视图过渡API）：浏览器原生页面切换动画支持

五五开发 174 阅读 0 评论 0 点赞

一、View Transitions API 概述

View Transitions API 是由 Web 社区组（WICG）提出的一项新的 Web API，旨在为单页应用（SPAs）和多页应用（MPAs）提供简单而强大的页面切换动画支持。该 API 的灵感来源于 Material Design 原则中的过渡效果，借鉴了 Android 活动中共享元素动画的理念，通过在两个文档（视图）之间创建动画过渡，实现类似 PPT 幻灯片切换的流畅视觉效果。

二、View Transitions API 的核心原理

View Transitions API 的核心在于通过快照机制实现动画过渡。当开发者调用 document.startViewTransition() 方法时，浏览器会执行以下步骤：

捕获初始状态：浏览器对当前页面进行快照，记录所有 DOM 元素的状态（包括位置、大小、样式等）。
执行 DOM 变更：在回调函数中，开发者可以自由修改 DOM，例如添加、删除元素或更改样式。
捕获最终状态：浏览器再次对页面进行快照，记录变更后的 DOM 状态。
生成过渡动画：浏览器基于两个快照生成一个伪元素树，包含 ::view-transition-old 和 ::view-transition-new 两个伪元素，分别代表旧视图和新视图。通过 CSS 动画属性，开发者可以自定义过渡效果，例如淡入淡出、缩放、位移等。

伪元素树的结构如下：

css
::view-transition {
  └─ ::view-transition-group(root) {
      └─ ::view-transition-image-pair(root) {
          ├─ ::view-transition-old(root)
          └─ ::view-transition-new(root)
      }
  }
}

三、View Transitions API 的关键特性

渐进增强：该 API 是渐进式增强的特性，在不支持的浏览器中会回退到无动画的页面切换，确保兼容性。
跨文档支持：除了单页应用内的过渡，API 还支持跨文档的视图过渡，例如多页应用中的页面跳转。
CSS 自定义：通过 ::view-transition-old 和 ::view-transition-new 伪元素，开发者可以完全控制动画的样式和时长。
共享元素动画：通过 view-transition-name 属性，开发者可以为特定元素指定名称，使浏览器在过渡时识别并匹配这些元素，实现共享元素动画。

四、View Transitions API 的应用场景

单页应用路由切换：在单页应用中，当用户切换路由时，可以使用 View Transitions API 实现平滑的页面过渡效果。
多页应用页面跳转：在多页应用中，当用户从一个页面跳转到另一个页面时，可以使用该 API 实现跨文档的视图过渡。
列表项动画：在列表中添加、删除或重新排序项时，可以使用 View Transitions API 实现项的平滑过渡。
主题切换：在切换应用主题时，可以使用该 API 实现背景色、字体等属性的渐变动画。

五、View Transitions API 的使用方法

以下是一个简单的案例，展示如何在单页应用中使用 View Transitions API 实现页面切换动画。

HTML 结构

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>View Transitions API Demo</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
    }
    .page {
      display: none;
      width: 100%;
      height: 100vh;
      justify-content: center;
      align-items: center;
      font-size: 2rem;
    }
    .page.active {
      display: flex;
    }
    ::view-transition-old(root),
    ::view-transition-new(root) {
      animation-duration: 0.5s;
      animation-timing-function: ease-in-out;
    }
    ::view-transition-old(root) {
      animation-name: fadeOut;
    }
    ::view-transition-new(root) {
      animation-name: fadeIn;
    }
    @keyframes fadeOut {
      from { opacity: 1; }
      to { opacity: 0; }
    }
    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }
  </style>
</head>
<body>
  <div id="page1" class="page active">Page 1</div>
  <div id="page2" class="page">Page 2</div>
  <button id="navigateBtn">Navigate</button>
 
  <script>
    const page1 = document.getElementById('page1');
    const page2 = document.getElementById('page2');
    const navigateBtn = document.getElementById('navigateBtn');
    let isPage1Active = true;
 
    navigateBtn.addEventListener('click', () => {
      if (document.startViewTransition) {
        document.startViewTransition(() => {
          if (isPage1Active) {
            page1.classList.remove('active');
            page2.classList.add('active');
          } else {
            page2.classList.remove('active');
            page1.classList.add('active');
          }
          isPage1Active = !isPage1Active;
        });
      } else {
        // Fallback for unsupported browsers
        if (isPage1Active) {
          page1.classList.remove('active');
          page2.classList.add('active');
        } else {
          page2.classList.remove('active');
          page1.classList.add('active');
        }
        isPage1Active = !isPage1Active;
      }
    });
  </script>
</body>
</html>

代码解析

HTML 结构：页面包含两个 div 元素，分别代表两个页面，初始时只显示第一个页面。
CSS 样式：
- .page 类用于控制页面的显示和隐藏。
- .active 类用于标记当前显示的页面。
- ::view-transition-old(root) 和 ::view-transition-new(root) 伪元素用于定义过渡动画的样式。
JavaScript 逻辑：
- 当用户点击导航按钮时，调用 document.startViewTransition() 方法。
- 在回调函数中，切换两个页面的 active 类，实现页面内容的更新。
- 如果浏览器不支持 View Transitions API，则回退到无动画的页面切换。

六、View Transitions API 的高级用法

1. 共享元素动画

通过 view-transition-name 属性，可以为特定元素指定名称，使浏览器在过渡时识别并匹配这些元素。例如：

html
<div id="list">
  <div class="item" style="--i: a1">Item 1</div>
  <div class="item" style="--i: a2">Item 2</div>
</div>
 
<style>
  .item {
    view-transition-name: var(--i);
  }
  ::view-transition-old(a1),
  ::view-transition-new(a1) {
    animation: move 0.5s;
  }
  @keyframes move {
    from { transform: translateX(0); }
    to { transform: translateX(100px); }
  }
</style>

在这个例子中，每个列表项都有一个唯一的 view-transition-name，当列表项被删除或重新排序时，浏览器会根据名称匹配新旧元素，实现平滑的过渡动画。

2. 自定义动画时长和类型

通过修改 ::view-transition-old(root) 和 ::view-transition-new(root) 伪元素的 animation-duration 和 animation-name 属性，可以自定义动画的时长和类型。例如：

css
::view-transition-old(root) {
  animation-name: slideOut;
  animation-duration: 1s;
}
::view-transition-new(root) {
  animation-name: slideIn;
  animation-duration: 1s;
}
@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

3. 结合 JavaScript 动态控制动画

通过 ViewTransition 对象，可以获取过渡的开始和结束状态，从而动态控制动画。例如：

javascript
const transition = document.startViewTransition(() => {
  // DOM 变更逻辑
});
 
transition.ready.then(() => {
  console.log('Transition started');
});
 
transition.finished.then(() => {
  console.log('Transition finished');
});

七、View Transitions API 的兼容性与未来展望

目前，View Transitions API 仍处于实验阶段，但已被最新版的 Chromium 内核浏览器（如 Chrome 115+）支持。Firefox 和 Safari 尚未全面支持该 API，但 Safari 18.0 已增加了对 View Transitions API 的支持。

随着浏览器的不断更新，View Transitions API 有望成为 Web 开发中的标准工具，为开发者提供更简单、更强大的页面切换动画支持。未来，我们可能会看到更多基于该 API 的插件、组件和解决方案，进一步丰富 Web 应用的用户体验。

八、总结

View Transitions API 为 Web 开发者提供了一种全新的方式来实现页面切换动画。通过简单的几行代码，开发者就可以实现类似 PPT 幻灯片切换的流畅视觉效果，提升用户体验。该 API 的核心在于快照机制和伪元素树，通过捕获页面的初始状态和最终状态，生成平滑的过渡动画。

无论是单页应用还是多页应用，无论是列表项动画还是主题切换，View Transitions API 都能提供强大的支持。随着浏览器的不断更新，该 API 的兼容性和功能将不断完善，成为 Web 开发中不可或缺的一部分。

扫描下方二维码，一个老毕登免费为你解答更多软件开发疑问！

本文分类：软件开发词汇/术语
本文标签：无
浏览次数：174 次浏览
发布日期：2025-04-23 23:39:00
本文链接：https://www.55kaifa.com/ruanjiankaifacihuishuyu/4316.html