tgoop.com/cosine_front_end/2938
Create:
Last Update:
Last Update:
#优质博文 #前端 #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
BY cosine - 前端人の日常频道
Share with your friend now:
tgoop.com/cosine_front_end/2938