View Transitions API 实战指南：几行代码让页面切换丝滑流畅

佛系豪豪吖

发布于 2026-06-22 21:02:32

1530

前端路由切换时那个生硬的页面跳闪，每次看到都难受。Chrome 111 开始支持的 View Transitions API，只用几行 CSS 就能给页面切换加上丝滑的过渡动画——不用 JS 库，纯浏览器原生。

什么是 View Transitions API？

一句话：浏览器原生提供的页面/元素切换过渡动画能力。以前做 SPA 页面过渡要搞一堆 CSS transition + JS 生命周期，现在浏览器直接帮你截图旧页面→执行 DOM 变更→截图新页面→自动补间。

工作原理：

调用 document.startViewTransition()
浏览器截取当前页面快照
执行你的 DOM 更新回调
浏览器截取新页面快照
两层快照叠加，自动生成 crossfade 动画

最简示例：SPA 路由过渡

// 不用任何框架，原生 SPA 路由 + 过渡动画
function navigate(url) {
  document.startViewTransition(() => {
    document.getElementById("content").innerHTML = "新的页面内容";
    history.pushState({}, "", url);
  });
}

// 拦截所有导航链接
document.addEventListener("click", (e) => {
  const link = e.target.closest("a[href]");
  if (link && link.origin === location.origin) {
    e.preventDefault();
    navigate(link.href);
  }
});

就这三行代码，页面切换自动带 fade 效果。零依赖、零配置。

自定义过渡动画

API 暴露了两个伪元素给 CSS 控制：

::view-transition-old(root) {
  animation: fade-out 0.3s ease;
}

::view-transition-new(root) {
  animation: fade-in 0.3s ease;
}

@keyframes fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

想做侧滑效果？改一下 keyframes：

::view-transition-old(root) {
  animation: slide-left 0.3s ease both;
}

::view-transition-new(root) {
  animation: slide-in-right 0.3s ease both;
}

@keyframes slide-left {
  to { transform: translateX(-30px); opacity: 0; }
}

@keyframes slide-in-right {
  from { transform: translateX(30px); opacity: 0; }
}

命名过渡——不同元素不同动画

想让标题飞入、内容淡入、图片放大？用 view-transition-name：

.hero-title {
  view-transition-name: heading;
}

.hero-image {
  view-transition-name: hero;
}

::view-transition-old(heading) {
  animation: slide-up 0.3s ease both;
}

::view-transition-new(hero) {
  animation: zoom-in 0.4s ease both;
}

关键约束：同一时刻页面上每个 view-transition-name 必须唯一，同名会崩。

实战：列表→详情页过渡

function openDetail(card) {
  const img = card.querySelector("img");
  img.style.viewTransitionName = "card-image";

  const transition = document.startViewTransition(() => {
    renderDetailPage(card.dataset.id);
  });

  await transition.finished;
  img.style.viewTransitionName = "";
}

效果：卡片图片平滑飞到详情页封面位置，比任何 JS 动画库都自然。

多页面（MPA）过渡——一行 HTML 全局生效

最让人兴奋的功能：跨页面也支持！

<meta name="view-transition" content="same-origin">

从此你网站里所有同源页面跳转自动带 fade 过渡，一行 HTML，全局生效。

兼容性与降级

if (!document.startViewTransition) {
  updateDOM();
  return;
}

document.startViewTransition(() => updateDOM());

Chrome/Edge 111+ 完全支持，Safari 和 Firefox 开发中。由于 API 是渐进增强设计——不支持的浏览器直接跳过过渡——零破坏性。

性能注意

浏览器截图是异步的，大页面截图耗时可能 50-100ms
过渡期间建议冻结页面交互（pointer-events: none）
transition.finished 是 Promise，可在动画结束后做清理

总结

View Transitions API 是 2026 年最被低估的浏览器 API 之一。它把"页面过渡动画"从需要引入 JS 动画库才能做的事，变成了浏览器原生能力：

一行 meta 标签，MPA 全局过渡

三行 JS，SPA 页面切换

CSS 完全控制动画细节

渐进增强，不支持的浏览器零影响

下次做项目，别再让页面生硬地跳来跳去了——给用户一点过渡，体验提升肉眼可见。

本文为作者原创，未经授权禁止转载、洗稿、搬运。如需引用请保留原文链接。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-06-14，如有侵权请联系 cloudcommunity@tencent.com 删除

浏览器

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度