前端Wiki/词条/View Transitions 视图过渡

View Transitions 视图过渡

定义让 DOM 状态切换「自动」带上过渡动画的浏览器原生 API：截图旧状态、淡入新状态

调用 document.startViewTransition(() => { 修改 DOM })，浏览器会对旧 DOM 截图，执行你的更新（此时页面不可见），然后把新状态淡入式覆盖旧截图。无需任何动画库，就能得到「换页一样」的过渡。

默认是交叉淡入；用 ::view-transition-group/old/new 伪元素配合 CSS 可以做 FLIP 飞行过渡——给元素命名 view-transition-name 后，新旧两个状态下它的位置/尺寸变化会被自动动画。跨文档（MPA）版本也已支持。

document.startViewTransition 包住 DOM 更新，默认交叉淡入
给元素设 view-transition-name 可实现 FLIP 飞行过渡
开启 transition 标签页可见才播放，切到后台自动不渲染

HTML

<style>
  .card { view-transition-name: card; }
  @keyframes fade { from { opacity: 0 } to { opacity: 1 } }
</style>
<div class="card">我会飞过去</div>
<button data-act="run" onclick="document.startViewTransition(()=>{document.querySelector('.card').style.transform='translateX(200px)'})">点击移动</button>

⚠ 常见误区

回调里做同步 DOM 更新，否则快照与实际不一致
以为它能替代所有动画——它的强项是「整体状态切换」
大量元素同时命名 view-transition-name 导致层爆炸

🔗 相关词条transform 2D 变换实战翻转卡片