一次惊艳的页面动效优化：用 View Transition API 带来“原生级”丝滑体验
近年来，页面切换动画一直是前端体验中的痛点。传统的 SPA动画往往看起来“假”、缺少过渡感。而现在，Chrome 带来了一项黑科技 —— View Transition API ，让你的网页像 App 一样丝滑！
🖼️ 直接先上效果图！
🔗 示例动图来自 Chrome 团队官方 demo，可真实复现！
✨ 什么是 View Transition API？
View Transition API是 Chrome 推出的一个全新 API，允许在页面状态变化时自动生成过渡动画，不需要写复杂的动画逻辑，也不需要前后页面完美同步 DOM 元素，效果却堪比原生！
适用于：
- 页面切换（路由跳转）
- DOM 内容重排（如点击切换 tab）
- SSR + CSR 场景中的“动效无缝体验”
🌟 实战演示：点击图片，切换展示的图片； 👇 我们以一个图片列表切换为例，演示如何一步步集成 View Transition API。
🧩 Step 1：HTML 页面结构与 CSS 样式
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Basic View Transitions API demo</title>
<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>
</head>
<body>
<h1 class="title">Basic View Transitions API demo</h1>
<main>
<section class="thumbs">
</section>
<section class="gallery-view">
<figure>
<img>
<figcaption>
<div class="caption-text"></div>
</figcaption>
</figure>
</section>
</main>
</body>
</html>
/* style.css */
/* ... 有些不相干的样式咱们忽略掉 */
/* 重点：view transition CSS */
::view-transition-group(root) {
animation-duration: 0.5s;
}
figcaption {
/* 为选定的元素提供单独的标识名称，并使其参与与根视图过渡不同的单独的视图过渡 */
/* 或者如果指定了 none 值，则不参与视图过渡 */
view-transition-name: figure-caption;
}
/* Simple final style */
::view-transition-group(figure-caption) {
height: 100%;
}
🎬 Step 2：启动 View Transition
// script.js
const imageData = [{
'name': 'Jungle coast',
'file': 'jungle-coast',
} // 省略掉冗余代码
]
const thumbs = document.querySelector('.thumbs');
const galleryImg = document.querySelector('.gallery-view img');
const galleryCaption = document.querySelector('.gallery-view figcaption');
function init() {
imageData.forEach(data => {
const img = document.createElement('img');
const a = document.createElement('a');
a.href = "#";
a.title = `Click to load ${data.name} in main gallery view`;
img.alt = data.name;
img.src = `images/${ data.file }_th.jpg`;
a.appendChild(img);
thumbs.appendChild(a);
a.addEventListener('click', updateView);
})
galleryImg.src = `images/${ imageData[0].file }.jpg`;
galleryImg.alt = imageData[0].name;
galleryCaption.textContent = imageData[0].name;
}
function updateView(event) {
const targetIdentifier = event.target.firstChild || event.target;
const displayNewImage = () => {
const mainSrc = `${targetIdentifier.src.split("_th.jpg")[0]}.jpg`;
galleryImg.src = mainSrc;
galleryImg.alt = targetIdentifier.alt;
galleryCaption.textContent = targetIdentifier.alt;
};
// 保持兼容性
if (!document.startViewTransition) {
displayNewImage();
return;
}
// 这篇文章的重点就是下面这行代码 ！！！
document.startViewTransition(() => displayNewImage());
}
init();
🔍 解释：
- view-transition-name是关键属性！它标记了要参与动画的元素，为选定的元素提供单独的标识名称，并使其参与与根视图过渡不同的单独的视图过渡——或者如果指定了 none 值，则不参与视图过渡；
- document.startViewTransition就是触发动画的核心方法。
✅ 浏览器支持情况
🧠 技术亮点总结：
✅ 原生支持动画流程，无需手写复杂动画帧
✅ 自适应 DOM 结构变化
✅ 自动衔接前后页面的“关键 DOM”
✅ SSR 页面也能享受“动画式”切换体验！
📦 延伸阅读 & 工具推荐
官方文档
框架支持示例：Next.js + View Transitions
社区库推荐：@view-transitions/api-polyfill
📝 最后
View Transitions API 是提升用户体验的利器，适合用于内容平台、电商、博客、项目集等页面切换频繁的场景。如果你想让你的前端项目“更像 App”，试试看这项技术吧！
