CSS view-transition-class 怎样让多元素复用过渡样式

我在给一个卡片列表加 View Transition 时，最先遇到的不是动画怎么写，而是“每张卡片都要有自己的过渡名称，公共样式却不想复制很多遍”。这个场景正适合 view-transition-class：让每个元素继续使用独立的 view-transition-name 完成配对，再让多个元素共享一组过渡伪元素样式。

官方文档：https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/view-transition-class

记住一句话：view-transition-name 负责“是哪一个元素”，view-transition-class 负责“这类元素用什么过渡样式”。前者不能随便重复，后者可以被多个元素共享。

先把两个名字的职责分开

view-transition-class 不是 view-transition-name 的替代品。它只提供一个额外的样式选择钩子，不会自动让元素参加视图过渡，也不会替元素生成唯一的配对名称。要让卡片在新旧状态之间被识别，仍然要给每张卡片配置独立的 view-transition-name。

可以把这两个属性看成两层关系：名称用于建立元素之间的对应关系，class 用于把对应元素产生的视图过渡伪元素归到同一组样式规则下。这个拆分能避免“为了复用动画而重复名称”的错误。

给多个元素配置唯一名称与共享 class

下面用三个卡片表示同一类视觉对象。示例只展示静态配置，真实项目里可以在状态更新前后保持这些名称稳定；不要把同一个名称同时分配给两个需要独立配对的元素。

订单摘要
库存摘要
消息摘要

/* 名称必须逐个唯一；class 只负责共享样式入口 */
#card-a { view-transition-name: card-a; }
#card-b { view-transition-name: card-b; }
#card-c { view-transition-name: card-c; }

/* 同一个 class 可以出现在多个已经命名的元素上 */
.card {
  view-transition-class: summary-card;
}

这里的关键不是把三个元素写成相同的 view-transition-name，而是让它们拥有相同的 view-transition-class。如果列表是动态生成的，名称应来自稳定的业务标识；不要把可能重复的数组下标直接当作跨状态名称。

用伪元素选择器复用一套动画

有了共享 class 后，可以用带 class 的视图过渡伪元素选择器集中定义样式。这样每个卡片仍然独立参与过渡，但持续时间、缓动方式等公共参数只维护一份。

/* 共享 class 让多个卡片的过渡组使用同一套参数 */
::view-transition-group(.summary-card) {
  animation-duration: 280ms;
  animation-timing-function: ease-out;
}

/* 新旧快照也可以按同一个 class 统一指定动画名 */
::view-transition-old(.summary-card) {
  animation-name: card-fade-out;
}

::view-transition-new(.summary-card) {
  animation-name: card-fade-in;
}

/* 旧快照淡出，避免依赖未说明的默认动画 */
@keyframes card-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* 新快照从轻微位移回到原位 */
@keyframes card-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

选择器里的 .summary-card 对应的是 view-transition-class 的值，不是普通 DOM class 的查询替代写法。它的价值在于把同一组过渡伪元素规则复用给多个名称不同的元素。

把降级和动态列表边界补上

实际项目里，我会先把“没有 View Transition 能力时页面也必须能更新”作为默认路径。不要让动画成为列表更新的前置条件；能力存在时增强，不存在时直接执行普通 DOM 更新。

// 先判断能力，再选择增强路径；不支持时仍然完成状态更新
function updateCards(applyUpdate) {
  if (typeof document.startViewTransition !== "function") {
    applyUpdate();
    return;
  }

  // 把 DOM 更新交给 View Transition 捕获新旧状态
  document.startViewTransition(() => {
    applyUpdate();
  });
}

还要留意三个边界。第一，view-transition-name 在同一时刻应保持可区分，重复名称会让配对关系变得不明确。第二，view-transition-class 只提供样式钩子，不会替代名称配置。第三，动态列表删除或重排时，先保证元素标识和更新逻辑正确，再决定是否添加过渡，否则排查问题时很容易把数据更新错误误认为动画问题。

小结：什么时候值得使用它

如果只有一个元素需要过渡，直接使用唯一的 view-transition-name 往往已经够用；当多个元素需要相同的过渡时长、缓动或新旧快照动画，而它们又必须保持独立配对，view-transition-class 就能把“身份”和“样式”拆开。

• 名称唯一：每个独立元素维护自己的 view-transition-name。
• 样式共享：多个元素使用同一个 view-transition-class。
• 始终降级：不支持 View Transition 时，普通更新逻辑仍应直接可用。

相关问题

view-transition-class 能自动生成 view-transition-name 吗？

不能。它只是额外的样式标识，元素仍需要自己的名称才能建立视图过渡中的对应关系。

多个元素可以共用同一个 view-transition-class 吗？

可以，这正是它的主要用途；但共享 class 不等于共享唯一名称，两个概念要分开配置。

不支持 View Transition 的浏览器怎么办？

保留普通 DOM 更新路径，并用能力判断包住增强逻辑。这样动画不可用时，核心内容仍能正常更新。