大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
今天给大家带来的主题是新API介绍，即 View Transitions API。话不多说，直接进入正题！
1.什么是 View Transitions
View Transition 是一种流行的设计选择，可减少用户的认知负荷，帮助用户留在当前上下文中，并减少在应用程序的状态或视图之间移动时感知到的加载延迟。
然而，在 Web 上创建视图转换历来都很困难。 单页应用程序 (SPA) 中的状态间转换往往涉及编写大量的 CSS 和 JavaScript ，因为本身的流程就非常复杂：
- 处理新旧内容的加载和定位
- 对旧状态和新状态进行动画处理以创建过渡
- 防止用户与旧内容的意外交互导致问题
- 转换完成后删除旧内容
由于新旧内容同时出现在 DOM 中，还存在可访问性问题，例如：阅读位置丢失、焦点混乱和奇怪的实时区域公告行为。 并且跨文档视图转换（即跨常规网站不同页面）是不可能的。
不可否认，CSS Transitions 和 Animations 在过去十年中彻底改变了网页动效，但并非一切都很容易。 而 View Transitions API 使用以下过程简化了这个流程：
- API 获取当前页面状态的快照。
- 根据需要更新 DOM ，例如：添加或删除元素。
- API 获取新页面状态的快照。
- API 使用默认淡入淡出或开发者自定义的任何 CSS 动画在两种状态之间进行动画处理。
开发者只需要像以前一样更新 DOM， 当 View Transitions API 可用于创建类似演示的效果时，通过几行附加代码可以逐步增强页面。
但是值得注意的是，当前该 API 是实验性的，但最近基于 Chromium 的浏览器支持页内（in-Page）、基于单文档（single-document） DOM 的效果。
Chrome 115+ 中还提供了用于导航的 ViewTransition API，并在各个页面加载之间提供动画，容易使用并且不需要任何 JavaScript。
Mozilla 和 Apple 尚未透露在 Firefox 和 Safari 中实现该 API 的意图。 任何没有 View Transitions API 的浏览器都将继续工作，因此该功能属于渐进增强。
2.新旧技术
老牌的开发者可能会对这种技术比较熟悉。 Microsoft 在 Internet Explorer 4.0（1997 年发布）中添加了元素和整个页面转换，并在 IE5.5（2000 年发布）中进行了进一步更新。 开发者可以使用标签添加类似 PowerPoint 的框、圆圈、擦拭、溶解、百叶窗、幻灯片、条带和螺旋：
奇怪的是，这项技术从未被广泛采用，非 Web 标准，可能当时 W3C 正处于起步阶段，开发人员很乐意使用大量其他 IE 特定技术！
3.创建页内过渡
接下来一起来看看如何使用 View Transitions API 技术来创建页面内的过渡效果。
假设 HTML 页面有两个
Article 1 content
Lorem ipsum dolor sit amet...
猜你喜欢
- 2025-04-06 css零基础自学教程(十五)css3过渡与转换
- 2025-04-06 SpriteJS:图形库造轮子的那些事儿
- 2025-04-06 VueUse中的这5个函数，也太好用了吧
- 2025-04-06 jq的动画、css3动画（jquery中的动画吗,是怎样用的）
- 2025-04-06 前沿穿越!聊聊HTML5小游戏的制作技巧及经验
- 2025-04-06 详细讲述iOS自定义转场（苹果手机转场特效）
- 2025-04-06 10 个派上用场的 Flutter 小部件（flutter pi）
- 2025-04-06 Qt使用教程:创建Qt Quick应用程序(三)
- 2025-04-06 分享几个漂亮的宇宙风格的按钮动画效果，让你喜欢上CSS
- 2025-04-06 学习几个网络新词，卖弄一下!谁再不知就out了?