CSS view-transition-name 怎样连接页面状态切换

如果页面切换时只有整页淡入淡出，读者很难看出“刚才点中的卡片”与“现在打开的详情”之间的关系。view-transition-name 的作用，就是把指定元素从默认的整页过渡中单独取出来，让它拥有自己的旧状态快照、新状态快照和动画入口。

它不是单独启动动画的开关，必须和 View Transition 的状态更新配合使用。最小组合是：给需要保持连续感的元素设置唯一名称，再把 DOM 更新放进 document.startViewTransition() 的更新回调，最后通过 ::view-transition-old(name) 和 ::view-transition-new(name) 调整该名称对应的过渡表现。

先把“页面切换”拆成两个边界

一个常见误区是给所有元素都加名字。实际更稳妥的做法，是先区分两类内容：

• 没有特殊连续关系的内容，继续使用 View Transition 的默认过渡；
• 用户明确认为是同一个对象的内容，例如列表卡片、详情标题或固定的预览区域，再分配独立名称。

下面的示例把页面状态分成“列表”和“详情”。卡片标题与详情标题共享同一个语义名称，其他页面内容不参与局部动画：

/* 只有需要保持视觉连续的标题进入独立过渡组 */
.product-card__title,
.product-detail__title {
  view-transition-name: product-title;
}

/* 页面主体仍交给默认的视图过渡处理 */
.product-list,
.product-detail {
  view-transition-name: none;
}

这里的名称不是 class，也不是 DOM id。它是浏览器在一次视图过渡中识别快照的标识。名称应该表达“两个状态中的同一个视觉对象”，而不是把整个页面结构都编码进去。

用唯一名称连接旧状态和新状态

当一次过渡正在运行时，活动的视图过渡名称需要保持唯一。列表中有多个同类卡片时，不要把同一个固定名称直接写到每一张卡片上，否则一次快照里会出现多个相同名称，局部过渡就失去明确的对应关系。

对于明确的一对一对象，可以使用固定名称：

/* 详情区域在同一时刻只有一个，适合固定名称 */
.product-detail__cover {
  view-transition-name: product-cover;
}

/* 进入新状态前，名称仍代表同一个视觉对象 */
.product-detail__title {
  view-transition-name: product-title;
}

如果页面上会同时出现多个需要独立过渡的同类元素，可以考虑 match-element。它让浏览器为元素建立自动匹配的过渡名称，适合不想手工维护大量唯一标识的列表场景。不过它仍然要和实际状态更新方式一起设计，不能替代稳定的业务对象关系。

选择名称时可以先问一个问题：旧页面中的这个元素，是否能和新页面中的一个明确元素对应？如果答案是否定的，就让它留在默认过渡里；如果答案是肯定的，再给它一个短而稳定的名称。

把名称接到状态更新回调

view-transition-name 只有在浏览器捕获新旧状态时才有意义。单页应用可以把状态修改放进 document.startViewTransition() 的回调，让浏览器知道哪些 DOM 变化属于同一次视图切换：

const detail = document.querySelector('#product-detail');
const openButton = document.querySelector('[data-open-detail]');

openButton.addEventListener('click', () => {
  const render = () => {
    // 在更新回调中替换状态，浏览器才能捕获新旧视图。
    detail.hidden = false;
    detail.querySelector('.product-detail__title').textContent = '无线降噪耳机';
  };

  if (!document.startViewTransition) {
    // 不支持 View Transition 时仍完成同一份 DOM 更新。
    render();
    return;
  }

  const transition = document.startViewTransition(render);
  transition.finished.catch((error) => {
    // 动画被跳过或中断时记录信息，不回滚已经提交的页面状态。
    console.debug('视图过渡未完成', error);
  });
});

这个写法的关键不是“必须等待动画结束”，而是让状态更新只有一个入口。兼容分支也调用同一个 render，因此不支持该 API 的浏览器仍然能打开详情，避免把动画能力变成业务功能依赖。

用过渡伪元素只控制命名对象

捕获到命名元素后，浏览器会为它建立对应的过渡伪元素。可以把旧快照和新快照看作两张独立的视觉层，再为它们设置不同的动画：

/* 旧标题向左淡出，新标题从右侧进入 */
::view-transition-old(product-title) {
  animation: title-out 180ms ease both;
}

::view-transition-new(product-title) {
  animation: title-in 220ms ease both;
}

@keyframes title-out {
  to {
    opacity: 0;
    transform: translateX(-10px);
  }
}

@keyframes title-in {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
}

伪元素选择器中的 product-title 必须和 CSS 属性中的名称一致。若把动画写到普通的 .product-detail__title 上，控制的是新 DOM 元素本身，而不是这次视图过渡产生的旧、新快照，视觉结果通常会和预期不同。

处理重复名称、支持性和减弱动画

稳定接入需要同时考虑三种边界：固定名称的唯一性、浏览器是否支持 View Transition，以及用户是否要求减少动态效果。它们分别决定“能否匹配”“是否启用增强”和“动画应该多强”。

/* 只在用户没有要求减少动态效果时播放局部动画 */
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(product-title) {
    animation-duration: 180ms;
  }

  ::view-transition-new(product-title) {
    animation-duration: 220ms;
  }
}

/* 不支持相关能力时，页面仍保留普通样式与普通状态更新 */
@supports (view-transition-name: product-title) {
  .product-detail__title {
    view-transition-name: product-title;
  }
}

@supports 只能帮助 CSS 渐进增强，JavaScript 仍要判断 document.startViewTransition 是否存在。两边都留出普通路径后，最坏情况只是没有局部动画，而不是点击后没有内容。

排查“名称没有生效”时，可以按下面的顺序缩小范围：

1. 确认状态更新确实发生在 startViewTransition 的回调中；
2. 确认同一时刻没有两个元素使用同一个固定名称；
3. 确认伪元素选择器中的名称与 CSS 属性完全一致；
4. 确认减弱动画设置没有让动画时长变成零或被样式覆盖；
5. 最后再检查浏览器是否支持对应的 View Transition 能力。

一张表记住这套连接关系

可以把这项 CSS 能力理解成一条“视觉连续性连接线”：页面状态负责产生新旧 DOM，view-transition-name 负责声明哪些对象要被单独捕获，过渡伪元素负责表现差异，而 JavaScript 和媒体查询负责决定增强是否启用。只要这四个边界分别清楚，页面切换就不会因为动画细节绑架业务状态。

相关问题

固定名称重复时为什么会出现异常？

因为同一次活动过渡需要用名称建立明确的旧、新对象对应关系。多个元素共享同一个固定名称会破坏这种唯一映射，应改成更细的对象边界或使用自动匹配方式。

没有 View Transition API 时要不要写两套渲染逻辑？

不需要复制业务逻辑。把 DOM 更新抽成一个函数，在支持时把它传给 startViewTransition，不支持时直接调用同一个函数即可。

为什么动画写在元素自身却看不到预期效果？

视图过渡动画作用于浏览器捕获的旧、新伪元素。要控制局部快照，应使用与名称匹配的 ::view-transition-old(name) 和 ::view-transition-new(name) 选择器。