无需登录 数据私有 本地保存

View Transition 模拟页面切换 - 使用 startViewTransition

CSS 开发工具 View Transition 动画 演示
6
0
0
0
View Transition API 检测中... 需要 Chromium 111+
🛍️ shopdemo.local / 产品目录
过渡中...
页面导航
过渡效果
过渡速度
快 (150ms) 400ms 慢 (1500ms)
view-transition-name
为标题和主图设置 view-transition-name，实现精细的元素变形过渡
过渡日志
等待操作...

View Transition API 常见问题

什么是 View Transition API？
View Transition API 是一个浏览器原生 API，通过 document.startViewTransition() 方法在 DOM 状态变化时自动创建平滑的过渡动画。浏览器会捕获变化前后的页面快照，并在两者之间生成过渡效果，无需手动编写复杂动画。
哪些浏览器支持 startViewTransition？
目前 Chrome 111+ 和 Edge 111+ 完整支持。Firefox 和 Safari 尚未支持（截至 2025 年）。建议使用特性检测 if (document.startViewTransition) { ... } 并提供降级方案。
view-transition-name 有什么作用？
view-transition-name CSS 属性用于标记特定元素，使浏览器在过渡期间追踪该元素的变化。如果新旧页面中存在相同名称的元素，浏览器会自动生成变形动画（位置、大小、形状的平滑过渡），而非简单的淡入淡出。
如何自定义过渡动画？
通过 CSS 伪元素 ::view-transition-old()、::view-transition-new()、::view-transition-group() 可自定义动画。例如修改 animation-duration、animation-timing-function，或完全替换关键帧动画来实现滑动、缩放等效果。
可以在单页应用（SPA）中使用吗？
非常适合！View Transition API 最初就是为 SPA 页面切换设计的。在路由变化时，用 startViewTransition 包裹 DOM 更新，即可获得原生般的页面过渡体验，无需引入额外的动画库。
过渡期间页面可以交互吗？
过渡期间页面理论上是可交互的，但建议在过渡进行时避免触发新的状态变化。startViewTransition 返回的 transition.finished Promise 可用于判断过渡是否完成，以便控制交互时机。
View Transition 的性能如何？
浏览器使用 GPU 加速的快照合成，性能优异。过渡仅处理页面可见部分的像素快照，不会阻塞主线程。但在包含大量 view-transition-name 元素的页面上，建议控制在 5-10 个以内以避免性能下降。
与 CSS 动画/过渡有什么区别？
CSS 动画需要预先定义起始和结束状态，且难以处理布局变化（如元素在 DOM 中的位置移动）。View Transition API 自动处理布局变化，浏览器智能计算元素从旧位置到新位置的路径，这是纯 CSS 无法做到的。
🔧 相关工具