1000 个卡片需要 1000 个唯一名称，View Transitions 的扩展难题现在有了纯 CSS 解法

阿柯·前端架构 内容创作者 2026-08-27 12 阅读

做跨文档视图过渡时，最容易遇到的不是「能不能动」，而是「动到第 48 个元素突然集体崩了」。

原因很简单：view-transition-name 要求页面内唯一，一个商品列表页有 48 个卡片，就得有 48 个唯一名称。教程里教的是给 hero image 写一个名称就完事，真落到生产级网格，CSS 选择器会直接爆炸。

问题在哪

旧方案通常两条路：

  • 构建时用 Sass/Loop 把 card-1 到 card-200 全部展开；
  • 运行时用 JS 遍历 DOM 注入内联名称。

两条路都能跑，但都属于「 technically works, duct-tape works」。前者让样式表膨胀，后者把样式逻辑重新绑回脚本，一旦组件重构忘了同步 JS，视觉过渡直接静默失败。

更麻烦的是，只要同一页面出现两个同名元素，浏览器会直接丢弃整组过渡，没有任何报错。

现在的解法：把「身份」和「样式」拆开

Chrome 125 开始，View Transitions Module Level 2 引入了 view-transition-class。这个属性的思路和普通 CSS class 一致：

  • view-transition-name 继续负责唯一身份；
  • view-transition-class 负责共享动画样式。

同一组卡片可以各自有 product-1、product-2 …… product-48 的名称，但全部带上同一个 view-transition-class: card。动画 CSS 只需要写一组：

.card {
  view-transition-class: card;
}

::view-transition-group(*.card) {
  animation-duration: 0.35s;
  animation-timing-function: ease-out;
}

这里 *.card 是通配符匹配：只要 view-transition-class 是 card，不管具体名称是什么，都走同一套动画。商品数从 48 变到 480，CSS 一行都不用加。

对于服务端渲染的场景，名称生成挪到 HTML 模板层：

<a href="/product/42" class="card"
   style="view-transition-name: product-42; view-transition-class: card">
  <img src="/images/42-thumb.jpg" alt="Widget" />
</a>

样式表不再需要知道任何具体商品 ID。

更远的未来：ident() 把这件事彻底变成纯 CSS

CSS Working Group 正在讨论 ident() 函数。它的目标是把字符串和 sibling-index() 拼接成合法标识符，让 view-transition-name 能直接写成：

.card {
  view-transition-name: ident("card-" sibling-index());
}

这意味着 1000 张卡片 = 1000 个唯一名称 = 一行 CSS，连模板层都不需要介入。

但要注意：截至 2026 年 5 月，ident() 还没有在任何稳定版浏览器中落地。Chrome 在 2025 年 5 月提交了 Intent to Prototype，后续没有公开实现时间表。sibling-index() 已经随 Chrome 138 落地，可以单独用于交错动画和计算样式，但和 ident() 的组合还不能直接用。

你现在该怎么做

如果你已经在用跨文档视图过渡，先做一次审计：

  1. 检查样式表里是否还有按 card-1、card-2 展开的批量选择器；
  2. 把动画统一改到 view-transition-class，用 *.class 通配；
  3. 服务端场景把唯一名称生成放到模板层，样式表只保留共享动画规则。

ident() 值得持续跟踪，但它不是今天能上生产的方案。view-transition-class 已经可以在 Chrome 125+、Edge 125+、Safari 18.2+ 使用，Firefox 144 也已完成实现。先把扩展性问题用现有标准解掉，比等一个还没 landing 的提案更实际。

下一步

下一个可以顺手评估的点是「按需命名」：不是页面加载时就给所有元素分配名称，而是在用户点击的瞬间通过 pageswap / pagereveal 事件动态注入。这样中低端设备不需要为未参与过渡的几十个元素做快照和 diff，性能收益会很明显。

评论区

0 条评论

登录后可评论。

阿柯·前端架构 12 阅读