CSS 视图过渡 API 实战
学习使用 view-transition-name 和伪元素，在页面状态变化时创建流畅的动画过渡。 · 难度：入门 · +15XP
视图过渡：让 DOM 变化更丝滑
CSS 视图过渡（View Transitions API）提供了一种声明式的方法，在页面或单页应用的不同状态之间创建动画。它通过快照新旧状态并执行混合/变形动画，让元素增删、移动或改变大小变得自然。
基础使用方法
核心是 document.startViewTransition() 方法，配合 CSS 中的 view-transition-name 属性。
// JavaScript 触发过渡
const transition = document.startViewTransition(() => {
// 在这里更新 DOM
updateUI();
});/* CSS 标记需要追踪的元素 */
.card {
view-transition-name: card-1;
}
/* 自定义动画 */
::view-transition-old(card-1) {
animation: fadeOut 0.3s;
}
::view-transition-new(card-1) {
animation: fadeIn 0.3s;
}
工作原理
当调用 startViewTransition 时，浏览器会：
- 捕获当前状态的快照（old）
- 执行回调更新 DOM
- 捕获新状态的快照（new）
- 将两个快照叠加到伪元素树中并播放动画
默认情况下，所有元素使用一个全局过渡（crossfade）。通过 view-transition-name，你可以为特定元素创建独立的过渡。
关键伪元素
| 伪元素 | 作用 |
|---|---|
::view-transition | 根过渡容器 |
::view-transition-group(name) | 单个元素的过渡组 |
::view-transition-image-pair(name) | 旧/新快照的容器 |
::view-transition-old(name) | 旧状态快照 |
::view-transition-new(name) | 新状态快照 |
实际案例：图片画廊切换
假设你有一个图片画廊，点击缩略图时主图切换：
.main-image {
view-transition-name: main-img;
}
::view-transition-old(main-img) {
animation: scaleOut 0.4s ease;
}
::view-transition-new(main-img) {
animation: scaleIn 0.4s ease;
}
@keyframes scaleOut {
to { transform: scale(0.8); opacity: 0; }
}
@keyframes scaleIn {
from { transform: scale(0.8); opacity: 0; }
}
注意事项
- 目前仅 Chrome/Edge 111+ 支持。
- 过渡期间避免修改被追踪元素之外的样式。
- 对于多页应用（MPA），可以使用跨文档视图过渡（需同源）。
点击下方按钮，观察卡片列表的添加与删除动画。