#SPA

View Transitions API 实战 2026：用浏览器原生能力做流畅的页面过渡

从列表点击进入详情，图片像被一只无形的手放大、平移、落位；返回时它又缩回列表原位。这种过去要依赖重量级动画库、还要手动对齐位置的共享元素过渡，如今浏览器原生就能完成。2026 年，View Transitions API 已在所有主流浏览器全面可用，跨文档过渡更被纳入 Interop 2026 互操作性计划。本文系统实战 View Transitions：单页应用同文档过渡的基本原理、view-transition-name 命名与共享元素、自定义关键帧动画、列表到详情的经典场景、多页应用跨文档过渡与 pageswap/pagereveal 事件、React/Vue 框架集成、无障碍与降级，以及性能边界。