Cross-Document View Transitions: Scaling Across Hundreds of Elements
跨文档视图转换(Cross-Document View Transitions)在从简单示例扩展到包含数百个元素的实际产品页面时,面临显著挑战。核心难题在于每个视图转换名称必须唯一,导致为每个元素单独编写动画样式的CSS规则呈爆炸式增长,难以维护。文章探讨了两种高效解决方案。其一是利用`view-transition-class`属性为同类元素分组,配合通配符选择器(如`::view-transition-group(*.card)`)用寥寥数行CSS统一控制所有同类元素的动画,无论数量多少。其二是采用“按需分配”策略,不在页面加载时为所有元素预设名称,而是通过`pageswap`和`pagereveal`事件,在用户交互(如点击)的精确时刻为涉及的元素动态添加与移除视图转换名称。这种方式避免了浏览器为未参与过渡的数十个元素进行无用快照和计算,显著提升了中低端设备上的性能。文章还提及了一个理想的纯CSS方案(使用`ident()`函数),但指出其尚未被浏览器支持,因此上述基于现有标准的模式是当前实现规模化过渡的实用路径。