View Transition types 怎么为不同导航选择动画

我第一次把页面过渡接进内容站时，最容易犯的错是只准备一套“向左滑入”的动画：点击下一章看起来正常，点返回或从目录跳到远处章节就会产生相反的阅读方向。View Transition types 的作用不是替代动画，而是给一次过渡贴上“前进”“后退”“直接打开”这样的类型，再让 CSS 选择合适的旧视图和新视图动画。

先把导航动作翻译成稳定的类型

类型名最好表达“内容如何移动”，而不是表达某个具体按钮。例如章节编号变大就是 forwards，编号变小就是 backwards，从目录直接打开则可以使用 jump。这样 CSS 不必知道导航来源，路由层也不必知道动画细节。

SPA 用 types 选择前进和后退动画

单页应用把 DOM 更新放到 update 回调中，并把类型数组交给同一次过渡。下面的示例只演示类型选择；renderPage 代表项目自己的渲染函数。

function navigateTo(nextIndex, currentIndex) {
  // 用内容位置判断方向，不把方向绑定到按钮文案。
  const type = nextIndex > currentIndex
    ? "forwards"
    : nextIndex  renderPage(nextIndex),
    // types 是字符串集合，可供 CSS 类型伪类匹配。
    types: [type]
  });
}

CSS 侧用 :active-view-transition-type() 区分同一个快照组的动画。示例把图片和标题设为独立快照，页面其他区域不参与方向动画。

html:active-view-transition {
  /* 只让需要移动的内容生成独立过渡快照。 */
  :root { view-transition-name: none; }
  .article-panel { view-transition-name: article-panel; }
}

html:active-view-transition-type(forwards) {
  /* 前进：旧内容左退，新内容右进。 */
  &::view-transition-old(article-panel) { animation: out-left .36s ease both; }
  &::view-transition-new(article-panel) { animation: in-right .36s ease both; }
}

html:active-view-transition-type(backwards) {
  /* 后退：方向反过来，保持空间感一致。 */
  &::view-transition-old(article-panel) { animation: out-right .36s ease both; }
  &::view-transition-new(article-panel) { animation: in-left .36s ease both; }
}

跨文档导航要区分固定类型和动态类型

多页应用先在共享 CSS 中加入 navigation: auto。如果所有页面都使用同一套动画，可以直接写 types: slide；但前进和后退需要不同方向时，类型应在导航事件中动态加入。

@view-transition {
  /* 让当前页和目标页参与跨文档过渡。 */
  navigation: auto;
}

html:active-view-transition-type(forwards) {
  /* 只给章节内容套用前进动画。 */
  section { view-transition-name: chapter; }
  &::view-transition-old(chapter) { animation: out-left .36s ease both; }
  &::view-transition-new(chapter) { animation: in-right .36s ease both; }
}

在离开页的 pageswap 和进入页的 pagereveal 中都设置类型，才能让旧页和新页使用同一语义。实际项目应依据路由、历史记录或章节索引判断，不要只看当前点击元素。

function transitionType(fromURL, toURL) {
  // 这里用路由中的序号示例，生产项目可换成路由元数据。
  const from = Number(new URL(fromURL).searchParams.get("chapter") || 0);
  const to = Number(new URL(toURL).searchParams.get("chapter") || 0);
  return to > from ? "forwards" : to  {
  // 离开页按旧页与目标页关系设置类型。
  const type = transitionType(event.activation.from.url, event.activation.entry.url);
  if (type) event.viewTransition.types.add(type);
});

window.addEventListener("pagereveal", (event) => {
  // 进入页重复设置，避免两端的动画语义不一致。
  const from = navigation.activation.from?.url;
  const to = navigation.activation.entry.url;
  if (!from) return;
  const type = transitionType(from, to);
  if (type) event.viewTransition.types.add(type);
});

类型能解决方向，但不能替你处理边界

我实际落地时会保留一份很短的检查清单。首先，类型名称必须是稳定的项目约定，避免一处写 back、另一处写 backwards；其次，刷新当前页面时没有明确的前进或后退关系，应该跳过动态类型；再次，view-transition-name 应尽量绑定局部内容，整页快照会让导航栏、滚动位置和固定元素一起移动。

• 不支持 API 的浏览器：直接执行 DOM 更新，不能把过渡当成业务成功条件。
• 用户开启减少动态效果：用 CSS 媒体查询把动画时长降为极短或关闭。
• 重复调用或过渡尚未结束：避免在状态机里同时启动互相覆盖的更新。
• 返回导航类型不确定：使用淡入或默认动画，不要猜测方向。

常见问题

types 可以同时放多个值吗？

可以。SPA 的 types 是字符串数组，运行中的 ViewTransition.types 也是 set-like 对象，可以用 add()、delete() 和 clear() 调整。多个类型会同时匹配相应的 CSS 规则，因此应控制组合数量。

为什么设置了 type 却没有换动画？

先确认 CSS 使用的是 :active-view-transition-type(类型名)，并且元素确实有对应的 view-transition-name。如果只给根元素写了动画，局部快照规则可能没有命中。

SPA 和 MPA 的类型写法一样吗？

命名和 CSS 选择器可以共用，但入口不同：SPA 在 startViewTransition() 传入类型；MPA 通过 @view-transition 或 pageswap、pagereveal 给跨文档过渡设置类型。