视图过渡的简介API

View Transitions API：简化网页动画的革新技术

View Transitions API 提供了一种更简便的方法来实现网页元素间的动画效果，即使是在页面加载之间也能流畅过渡。它是一种渐进增强技术，具有良好的兼容性。

传统的 CSS 过渡和动画在网页特效方面取得了显著成就，但并非所有动画都易于实现。例如，对包含十张图片和标题的列表进行交叉淡入淡出动画，需要以下步骤：

1. 保留旧的 DOM 元素；
2. 创建新的 DOM 元素，并将其添加到页面适当的位置；
3. 淡出旧元素的同时淡入新元素；
4. （可选）用新 DOM 元素替换旧元素。

而 View Transitions API 简化了这一过程：

1. API 捕获当前页面状态的快照；
2. 更新 DOM，添加或删除必要的元素；
3. API 捕获新页面状态的快照；
4. API 使用默认的淡入淡出效果或自定义 CSS 动画在两个状态之间进行动画过渡。

我们只需更新 DOM，无需额外复杂的步骤。只需几行代码，即可在支持 View Transitions API 的浏览器中实现类似幻灯片的精美动画效果。

目前，该 API 处于实验阶段，但最新的基于 Chromium 的浏览器已经支持单页面 DOM 动画效果。Chrome 115 及更高版本还支持页面加载间的动画效果，例如在典型的 WordPress 网站上。这使得使用更加简便，无需 JavaScript 代码。

需要注意的是，Mozilla 和 Apple 尚未公布其在 Firefox 和 Safari 中实现该 API 的计划。不支持 View Transitions API 的浏览器仍能正常工作，因此现在添加此效果是安全的。

新旧技术的对比

资深开发者可能会感到似曾相识。早在 1997 年发布的 Internet Explorer 4.0 就引入了元素和整页过渡功能，并在 2000 年发布的 IE5.5 中进行了更新。我们可以使用 <meta> 标签添加 PowerPoint 风格的各种过渡效果：

<meta content="progid:DXImageTransform.Microsoft.Iris(Motion='in', IrisStyle='circle')" http-equiv="Page-Enter">
<meta content="progid:DXImageTransform.Microsoft.Iris(Motion='out', IrisStyle='circle')" http-equiv="Page-Exit">

然而，这种技术并未得到广泛采用，因为它并非 Web 标准。

创建页面内过渡效果

以下示例展示了如何在 Chrome 浏览器中使用 View Transitions API 创建简单的淡入淡出效果：

（此处应嵌入 CodePen 示例 1 的链接和截图）

HTML 代码包含两个 <article></article> 元素，分别用于显示不同的内容块：

（此处应嵌入 HTML 代码片段）

switchArticle() 函数处理所有 DOM 更新，通过添加或删除 hidden 属性来显示或隐藏每个 <article></article> 元素。页面加载时，根据页面 URL 的 location.hash 或第一个 <article></article> 元素确定活动的 <article></article> 元素：

（此处应嵌入 JavaScript 代码片段）

事件处理程序函数监控所有页面点击，并在用户点击带有 #hash 的链接时调用 switchArticle()：

（此处应嵌入 JavaScript 代码片段）

通过将 switchArticle() 函数作为回调传递给 document.startViewTransition()，我们可以使用 View Transitions API：

（此处应嵌入 JavaScript 代码片段）

document.startViewTransition() 会捕获初始状态的快照，运行 switchArticle()，捕获新状态的快照，并在两者之间创建默认的半秒钟淡入淡出效果。

CSS 选择器 ::view-transition-old(root) 和 ::view-transition-new(root) 可用于分别设置旧状态和新状态的动画效果：

（此处应嵌入 CSS 代码片段）

（后续内容，包括更复杂的动画、异步 DOM 更新、Web Animations API 的使用、多页面导航过渡、动画禁用以及总结和常见问题解答，均需按照类似方式进行改写，将原文中的代码和图片嵌入到相应位置，并用更简洁明了的语言进行描述。）

以上是视图过渡的简介API的详细内容。更多信息请关注PHP中文网其他相关文章！