放弃你的动画库：5 行代码让你的 SPA 像原生应用一样

Source: Dev.to

工作原理

浏览器在后台执行以下三个步骤：

1. 对旧状态进行截图。
2. 运行你的回调函数来更新 DOM。
3. 对新状态进行截图并对差异进行动画处理。

所有操作都在单帧内完成，用户会看到平滑的过渡。默认动画是交叉淡入淡出；使用 CSS 你可以创建滑动、变形或任何你想要的效果。

示例：原始视图切换代码

// original SPA view switch
function showView(name) {
  document.querySelectorAll('.view').forEach(v => v.style.display = 'none');
  document.getElementById('view-' + name).style.display = 'block';
  updateActiveNav(name);
}

让它支持视图过渡

function showView(name) {
  const doSwitch = () => {
    document.querySelectorAll('.view').forEach(v => v.style.display = 'none');
    document.getElementById('view-' + name).style.display = 'block';
    updateActiveNav(name);
  };

  if (document.startViewTransition) {
    document.startViewTransition(doSwitch);
  } else {
    // fallback: works normally without animation
    doSwitch();
  }
}

就这么简单。概览 → 族 → 节点标签页切换现在都有柔和的交叉淡入淡出。无需构建步骤、无需新增依赖、不会增加包体积。

使用 CSS 自定义过渡

/* Slide left‑to‑right */
::view-transition-old(root) {
  animation: slide-out 0.25s ease-out;
}
::view-transition-new(root) {
  animation: slide-in 0.25s ease-out;
}

@keyframes slide-out {
  to { transform: translateX(-40px); opacity: 0; }
}
@keyframes slide-in {
  from { transform: translateX(40px); opacity: 0; }
}

使用 view-transition-name

为两个状态下的元素赋予相同的名称，浏览器会自动插值它们的位置和尺寸。

/* Same name on thumbnail and fullscreen view */
.thumbnail   { view-transition-name: hero-image; }
.fullscreen  { view-transition-name: hero-image; }

现在点击展开或折叠的体验像原生一样——无需引入 GSAP 或 Framer Motion。

与流行动画库的对比

多页应用的视图过渡 (MPA)

对全页过渡，只需两行 CSS：

@view-transition {
  navigation: auto;
}

关键说明

1. 过渡期间元素会以图像形式动画；font-size 的变化或 clip-path 不会在动画阶段生效。
2. view-transition-name 必须在每个页面唯一，例如 view-transition-name: item-${id};。
3. Firefox 的 MPA 支持尚未完成。document.startViewTransition 在 Firefox 133+ 可用。@view-transition { navigation: auto } 规则预计在 2026 年某时实现——目前可使用 @supports 作为后备方案。

优雅降级 —— 不支持的浏览器只会正常更新 DOM，不会出现错误。

结论

在寻找新动画库之前，先看看浏览器已经免费提供了什么。视图过渡 API 提供了一种轻量、无依赖的方式，让你的 SPA（或 MPA）几乎不写代码就拥有原生应用的体验。