CSS View Transitions 2：分层捕获与动画优化技术解析

背景与核心问题

在CSS View Transitions技术中，当前捕获参与过渡元素的方式主要针对简单的平面树结构动画（如交叉淡入淡出+变换动画）。系统会保存元素的相关属性（如从根元素的变换、混合模式、配色方案等），而其他所有样式都被烘焙到快照中。然而，随着嵌套过渡组功能的引入，这种模式需要扩展以适应更复杂的场景。

技术挑战

当元素具有嵌套的后代过渡组时，某些CSS特性需要以不同方式处理：

• 树形效果（透明度、滤镜、图像遮罩）
• 裁剪（裁剪路径、溢出、边框半径）
• 3D效果（实际变换、preserve-3d、透视、变换原点）

特别是边框半径与溢出的组合具有独特效果——它会裁剪其后代元素但不裁剪边框本身。为了正确渲染具有嵌套裁剪后代的圆角元素，需要捕获整个盒子装饰集（背景和边框）并将其应用到组上。

捕获模式讨论

经过讨论，提出了四种可能的捕获模式（每种模式都包含上一种的功能）：

1. 几何模式：仅捕获基本几何信息
2. 平面模式：几何+快照+混合（当前实现方式）
3. 复合模式：包含裁剪+3D+树形效果
4. 分层模式：包含边框+背景+阴影

这些模式本质上是互不兼容的，如果在旧状态使用一种模式，在新状态使用另一种模式，会导致动画与捕获图像不同步，产生视觉上的问题。

实现方案讨论

经过深入探讨，形成了三种主要实现方案：

1. 默认变更方案：改变所有视图过渡的默认捕获模式，将盒子装饰和树形效果作为样式捕获，仅对内容进行交叉淡入淡出。这种方案认为变形动画在大多数情况下优于交叉淡入淡出，但可能改变现有视图过渡的动画效果。

2. 显式属性方案：引入新属性（如view-transition-style或view-transition-capture-mode），提供两种选项：一种是当前方式，另一种是捕获盒子装饰和树形效果作为样式。

3. 自动判断方案：添加新属性并赋予auto值。捕获模式默认与当前相同，但当元素是包含组（具有嵌套组后代）时自动切换模式。

技术决策与实施

CSS工作组最终达成以下决议：

• 变更所有视图过渡的捕获模式，并明确每个属性如何受此变更影响
• Blink引擎将进行实验，如有兼容性问题将反馈
• 最终在各规范的模块交互部分描述属性分类

在实验过程中，明确了需要参与捕获的属性分类：

• 复制属性：需要捕获并渲染到快照中的属性（如overflow、transform-style等）
• 委托属性：需要捕获并委托给组，快照渲染时不包含这些属性（如background、border、filter等）

兼容性考量与优化

变更捕获模式可能影响现有页面的主要方式是::view-transition-group伪元素现在会有动画许多属性的关键帧，这会覆盖直接放在组伪元素上的样式。可能的优化方案是添加一个额外的伪元素（如::view-transition-effect）在组和图像对之间，专门用于动画这些属性，而让伪元素仅动画几何属性。

这种设计在人体工程学上也更优，因为作者可以自定义一个而不破坏另一个。同时，这种分层捕获方式提供了更优质的体验，但平面交叉淡入淡出捕获更简单：所有内容都在旧/新元素中，作者总是可以隐藏其中一个。

未来方向

当前倾向于将分层捕获作为默认模式，让现有视图过渡的使用者在Canary版本中测试其网站。这种方式的优势包括：

• 开发者可以通过简单方式切换到更简单的模式，无需添加新的中间DOM元素
• 在存在互操作性问题时，通过@supports使新行为可检测
• 为更复杂的动画场景提供更好的支持，同时保持简单用例的易用性

这项技术的演进将显著提升Web动画的表现力和灵活性，为开发者提供更强大的工具来创建流畅、自然的过渡效果。