列表动画最烦的就是给每个元素起名字——Safari 18.4 今天让浏览器自己生成

做列表动效的时候，想让每个卡片独立过渡，就要给每个元素写一个唯一的 view-transition-name。十个还好，一百个就疯了——还要保证名字全局唯一，不能和别的组件冲突。Safari 18.4 给了个新值 match-element，浏览器根据元素身份自动生成名称，这件事不用写了。

以前的土办法

view-transition-name 的核心价值在于让浏览器知道「哪些元素是同一个，只是状态变了」，这样才能做共享元素过渡（thumbnail 变大图、列表项展开）。但代价是每个元素都要有唯一名称。

列表场景的问题特别明显：

• 100 个商品卡片要独立动画 → 要写 100 个不同名称
• 动态列表增删 → 名称管理变成维护负担
• 不同组件之间名称不能冲突 → 全局协调成本
• 框架渲染的节点复用 → 名称可能在不同状态重复

以前的标准做法是动态生成：

.card:nth-child(1) { view-transition-name: card-1; }
.card:nth-child(2) { view-transition-name: card-2; }
/* ...写到第一百个 */

或者用 JS 在运行时赋值。但这两种都绕不开「名称要独特」这件事。

match-element：浏览器自己搞定

Safari 18.4 和 Chrome 137+ 支持一个新的 view-transition-name 取值：match-element。

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

效果：浏览器根据元素在 DOM 树中的身份自动生成内部唯一名称。你只需要给同类元素写相同的 match-element，不需要知道具体值是什么。

需要单独处理某个元素时，直接覆盖：

/* 进场的卡片单独命名，覆盖 match-element */
.card.entering {
  view-transition-name: card-entering;
}

实战：列表动画三行 CSS

完整写法：

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

/* 用 class 控制共同动画时序，不用逐个写 delay */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* 特殊卡片单独动画 */
::view-transition-old(card-entering):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(card-entering):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

对比传统写法：删掉了 100 行 nth-child 命名规则，改成 3 行 match-element + class 组合。

兼容范围

这个功能已经是 Baseline Newly Available 级别：

• Safari 18.4 / iOS 18.4：✅（2026 年初发布）
• Chrome 137+：✅
• Firefox 144+：✅
• 全球覆盖率：~90%

不支持的浏览器：静默回退到默认全局过渡，不会报错。

落地方案

1. 替换：把列表里手动编号的 view-transition-name（card-1、card-2……）换成 match-element，删除所有 nth-child 规则
2. 归一：用 view-transition-class 控制同组动画时序，替代逐个写 transition-delay
3. 渐进增强：

@supports (view-transition-name: match-element) {
  .card { view-transition-name: match-element; }
}

不支持的浏览器直接跳过，页面正常运行。

数据来源：Safari 18.4 Release Notes（Apple Developer Documentation）确认 view-transition-name: match-element 支持；Chrome Blog「What’s new in view transitions (2025 update)」含完整实操示例；MDN view-transition-name 兼容性表显示 Safari 18.4 / iOS 18.4 完整支持。