跳到正文
前端设计博物馆
M-07

视图过渡

View Transitions

页面切换时，浏览器把新旧两屏接起来，补出中间那一下过渡。

  • 又叫：
  • 页面转场
  • 跨页面过渡
  • 共享元素过渡
  • view transition
  • view-transition
  • page transition
展厅
动效与节奏
形态
整页对比
播放
手动触发
关键词
浏览器 API / 需要 JS / 合成层动画 / 动效较多 / 先查兼容
↕ 自己动手试试
M-07形态 整页对比播放 手动触发View Transitions

参数工作台

复制给 AI

随参数实时更新

做一个视图过渡（view transition）：点击列表卡片时用 document.startViewTransition 包住 DOM 更新，给被点的那张卡片加 view-transition-name，让它在详情页放大成头图，过渡 300ms、缓动 cubic-bezier(0.22, 1, 0.36, 1)。同一时刻 view-transition-name 只能有一个；不支持这个 API 的浏览器直接切换，不要留空白。

什么时候用

  • 列表点进详情：被点的那张卡片原地放大成详情页的头图
  • 同一个应用里换标签页或换主题，希望两屏连起来而不是硬切
  • 导航栏在多个页面里都一样，想让人看出它是同一个元素

适用场景：页面 / 卡片 / 导航

推荐取值

时长
200–400ms
缓动
cubic-bezier(0.22, 1, 0.36, 1)
共享元素命名
view-transition-name: card-3（同一时刻唯一）
降级
不支持时瞬间切换，不留空白

别搞混

  • 和「CSS transition」的区别

    CSS transition 只能让同一个元素自己变；视图过渡是浏览器给整屏拍新旧两张快照再做动画，所以能把旧界面里的某个元素平滑接到新界面的对应元素上。

  • 和「入场动画」的区别

    入场动画是新页面自己在播，旧界面已经消失；视图过渡的动画发生在两屏之间，旧屏要一起参与，所以改 DOM 的那一步必须放进 startViewTransition 的回调里。

容易踩的坑

  • 同一时刻 view-transition-name 必须唯一：列表里给每张卡片都写死一个名字会直接报错，要在点击时只给被点的那张临时加上
  • 改 DOM 的代码必须在 document.startViewTransition(() => …) 的回调里执行，写在回调外面拍到的还是旧界面
  • 过渡期间会有一层伪元素盖在页面上，指针事件被短暂挡住，别在过渡里做点击判断
  • 不支持这个 API 的浏览器要有兜底：直接切换即可，不要留一屏空白等过渡
  • 跨文档（多页应用）要写 @view-transition { navigation: auto }，而且必须同源

无障碍降级

prefers-reduced-motion 下不要调用 startViewTransition（或把 ::view-transition-group 的 animation-duration 设成 0），页面瞬间切换，功能完全一样。

关键词

  • View Transition API
  • document.startViewTransition
  • view-transition-name
  • ::view-transition-old
  • ::view-transition-new
  • shared element transition
  • cross-document view transition

参考

相关展品