#优质博文 #前端 #CSS #新特性
What's new in view transitions (2025 update)

AI 摘要:本文综述了 Chrome 团队在 2025 年对 View Transition API 的更新,包括浏览器支持进入 Baseline、React 核心支持、新的自动命名与嵌套过渡功能、调试工具改进、动画属性继承优化及未来即将推出的 Scoped View Transition 等特性。这些改进显著提升了过渡动画在 Web 开发中的灵活性、性能与一致性。

[以下是方便搜索索引的大纲(AI 生成),请读原文]
1. 浏览器与框架支持进展
• Baseline 支持:View Transition API 即将成为 Interop 2025 Baseline 新规范,Firefox 144 将支持 document.startViewTransition(updateCallback)、view-transition-class、自动命名(view-transition-name: match-element)及 :active-view-transition 选择器。
• React 集成:React 团队已在 React 核心中集成 <ViewTransition> 组件,从实验版 (react@experimental) 进入 Canary 通道,文档与讲解视频同步更新,意味着 API 设计趋于稳定。

2. 新发布功能(Recently Shipped Features)
• 自动命名元素:view-transition-name: match-element 允许浏览器自动为匹配元素生成内部名称,减少开发时的手动命名负担。
• DevTools 调试支持增强:Chrome 139 起,开发者工具能正确显示针对 ::view-transition-* 伪元素使用 view-transition-class 的样式规则,便于动画调试。
• 嵌套过渡组 (Nested View Transition Groups):自 Chrome 140 起可嵌套 ::view-transition-group,保留层级结构,使 3D 旋转、裁剪等效果在过渡中保持。
• 继承更多动画属性:伪元素现在会继承更多 animation-* 属性(如 timing-function、iteration-count 等),简化同步动画管理。
• 修正 finished promise 延迟问题:finished 回调执行不再等待额外帧,从而消除动画尾部闪烁问题。

3. 即将推出的功能(Upcoming Features)
• Scoped View Transitions:允许在任意 DOM 子树上启动局部过渡 (element.startViewTransition()),可同时运行多个独立过渡,并仅锁定交互范围在对应子树。Chrome 140 开放实验测试。
• ::view-transition 定位变更:将在 Chrome 142 从 position: fixed 改为 absolute,实现与 CSS 规范统一。
• document.activeViewTransition 属性:即将推出的新属性,可直接访问当前活动的 ViewTransition 实例,便于跨文档或同文档过渡管理。
• ViewTransition.waitUntil API:允许使用 Promise 控制过渡结束时机,可实现等待异步操作(如 fetch)后再结束动画,为未来滚动驱动(scroll-driven)过渡铺路。

4. 展望与反馈
• Chrome 团队表示将持续迭代 View Transition 技术,未来重点关注 Scoped Transition 与更丰富的开发者 API。
• 鼓励通过 CSS WG 或 Chromium 提交功能建议与问题反馈。


author Bramus What's new in view transitions (2025 update)  |  Blog  |  Chrome for Developers
 
 
Back to Top