用途:为 React/Next.js 应用实现页面与路由之间的平滑动画过渡,消除页面切换的突兀跳变,提升接近原生应用的视觉连续感。
主要能力:浏览器捕获旧状态快照并与新状态交叉淡入,React 的实现接入并发渲染模型,过渡可被打断并按优先级调度。支持 ViewTransition 组件、addTransitionType 对过渡分类、CSS ::view-transition 伪元素控制动画,以及跨路由共享元素过渡(如列表缩略图变形为详情页大图),通过 CSS 的 view-transition-name 建立元素关联,由浏览器自动插值。
使用方式:用 ViewTransition 包裹页面内容;在共享元素两侧设置同名 view-transition-name(如 name={product-${product.id}});用 addTransitionType 区分前进/后退方向,再以 [data-transition-type="back"] 等选择器编写对应动画。
适用场景:路由跳转、列表到详情的共享元素动画、页面内容入场/退场、带回退方向的浏览器前后导航。
限制与注意:view-transition-name 必须唯一,重复会静默失败;过渡时长建议低于 300ms;应尊重 prefers-reduced-motion;需为不支持 View Transition API 的浏览器提供回退;应在慢网络与 CPU 降速下测试。平台兼容方面,Cursor、VS Code、Windsurf、Claude Code、Cline 为完全支持,aider 为部分支持且 CSS 上下文有限。
其他:许可为 MIT。具体收费与定价信息暂未提供。