CSS 视图转换模块 第 1 级

1. 令 transition 为 当前对象（this）的 相关 Realm 中新建的 ViewTransition 对象。

2. 如果提供了 updateCallback，则将 transition 的 update callback 设为 updateCallback。

3. 令 document 为 当前对象（this）的 相关全局对象（relevant global object）的 关联文档（associated document）。

4. 如果 document 的 visibility state 为 "hidden"，则用 "InvalidStateError" DOMException 跳过 transition，并返回 transition。

5. 如果 document 的 激活视图过渡（active view transition） 不为 null，则用 "AbortError" DOMException 在 当前对象（this）的 相关 Realm 跳过该视图过渡。

   注意： 这可能导致两个异步 update callback 并发运行（因此可能无序）：一个属于 document 当前的 激活视图过渡，另一个属于本次 transition。按照本特性的设计，假定开发者会用其它机制或框架正确调度这些 DOM 变更。

6. 将 document 的 激活视图过渡 设置为 transition。

   注意： 视图过渡的流程会在设置视图过渡（setup view transition），通过 执行待处理过渡操作（perform pending transition operations）继续进行。

7. 返回 transition。

方法步骤（method steps）如下，适用于 skipTransition()：

1. 如果当前对象（this）的阶段（phase）不是 "done"，则用 "AbortError" DOMException，为当前对象跳过视图过渡（skip the view transition）。

要执行待处理过渡操作（perform pending transition operations），给定一个 Document document，执行以下步骤：

1. 如果 document 的 激活视图过渡（active view transition） 不为 null，则：

   1. 如果 document 的 激活视图过渡的 阶段（phase）为 "pending-capture"，则为 document 的 激活视图过渡 设置视图过渡（setup view transition）。

   2. 否则，如果 document 的 激活视图过渡的 阶段（phase）为 "animating"，则为 document 的 激活视图过渡 处理过渡帧（handle transition frame）。

注意： 该算法捕获文档的当前状态， 调用过渡的 UpdateCallback， 然后捕获文档的新状态。

1. 令 document 为 transition 的 相关全局对象（relevant global object）的 关联文档（associated document）。

2. 为 transition 捕获旧状态（Capture the old state）。

   如果返回失败，则用 "InvalidStateError" DOMException 在 transition 的 相关 Realm 跳过视图过渡（skip the view transition），然后返回。

3. 将 document 的 视图过渡的渲染抑制（rendering suppression for view transitions） 设为 true。

4. 在 DOM 操作任务源（DOM manipulation task source）上， 针对 transition 的 相关全局对象， 排队一个全局任务（Queue a global task），以执行以下步骤：

   注意： 此处排队任务是因为在捕获图像时纹理读取可能是异步的，尽管 HTML 规范中的渲染步骤表现为同步。

   1. 如果 transition 的 阶段（phase）为 "done"，则中止这些步骤。

      注意： 如果 transition 在此之前已被跳过，就会发生这种情况。

   2. 调用更新回调（call the update callback）。

1. 如果 transition 的 阶段（phase）为 "done"，则返回。

   注意： 如果 transition 在此之前被跳过，就会发生这种情况。

2. 将 视图过渡的渲染抑制（rendering suppression for view transitions） 设为 false。

3. 如果 transition 的 初始快照包含块尺寸（initial snapshot containing block size） 不等于 快照包含块尺寸（snapshot containing block size），则为 transition 跳过视图过渡，并返回。

4. 为 transition 捕获新状态（Capture the new state）。

   如果返回失败，则用 "InvalidStateError" DOMException 在 transition 的 相关 Realm 跳过视图过渡，然后返回。

5. 解决（Resolve） transition 的 update callback done promise，值为 undefined。

6. 对于每个 capturedElement 属于 transition 的 命名元素（named elements）的值：

   1. 如果 capturedElement 的 新元素（new element） 不为 null，则将 capturedElement 的 新元素的 视图过渡捕获状态（captured in a view transition） 设为 true。

7. 为 transition 设置过渡伪元素（Setup transition pseudo-elements）。

8. 为 transition 更新伪元素样式（Update pseudo-element styles）。

   如果返回失败，则用 "InvalidStateError" DOMException 在 transition 的 相关 Realm 跳过视图过渡，然后返回。

   注意： 上述步骤需要运行文档生命周期阶段，以计算样式/布局过程中产生的信息。

9. 将 transition 的 阶段（phase）设为 "animating"。

10. 解决（Resolve） transition 的 ready promise。

1. 令 document 为 transition 的 相关全局对象（relevant global object）的 关联文档（associated document）。

2. 令 namedElements 为 transition 的 命名元素（named elements）。

3. 令 usedTransitionNames 为新的字符串集合（set）。

4. 令 captureElements 为新的元素列表（list）。

5. 令 document 为 transition 的 相关全局对象的 关联文档。

6. 如果快照包含块尺寸（snapshot containing block size）超过实现自定义（implementation-defined）的最大值，则返回失败。

7. 将 transition 的 初始快照包含块尺寸（initial snapshot containing block size） 设为快照包含块尺寸。

8. 对于每个 element，属于所有已连接的元素（connected element）并且其节点文档等于 document，按绘制顺序（paint order）遍历：

   以绘制顺序遍历，确保该顺序被缓存于 namedElements。这定义了 ::view-transition-group 伪元素的 DOM 顺序，使得在绘制栈底部的元素会生成 ::view-transition 的第一个伪子元素。

   1. 如果该 element 的任何平坦树（flat tree）祖先跳过其内容（skips its contents），则继续（continue）。

   2. 如果 element 有多个盒片段（box fragment），则继续。

      注意：未来版本可能会支持对分片元素的过渡。参见 #8900。

      注意：此处的盒片段并不指跨行内盒的行盒分片，此类行内元素可以参与过渡。

   3. 令 transitionName 为 element 的 view-transition-name 的计算值（computed value）。

   4. 如果 transitionName 为 none，或 element 未被渲染（not rendered），则继续。

   5. 如果 usedTransitionNames 包含 transitionName，则返回失败。

   6. 添加 transitionName 到 usedTransitionNames。

   7. 将 element 的 视图过渡捕获状态（captured in a view transition） 设为 true。

   8. 添加 element 到 captureElements。

   算法将继续执行一个独立循环，以确保所有参与捕获的元素的 视图过渡捕获状态 都被设为 true，然后再被后续步骤读取。

9. 对于每个 element 属于 captureElements：

   1. 令 capture 为新的捕获元素结构体（captured element struct）。

   2. 将 capture 的 旧图像（old image） 设为 捕获 element 图像 的结果。

   3. 令 originalRect 为，如果 element 是 文档元素（document element），则为快照包含块（snapshot containing block），否则为该元素的边框盒（border box）。

   4. 将 capture 的 旧宽度（old width） 设为 originalRect 的 width。

   5. 将 capture 的 旧高度（old height） 设为 originalRect 的 height。

   6. 将 capture 的 旧变换（old transform） 设为一个 <transform-function>，该函数会将 element 的边框盒（border box）从快照包含块原点（snapshot containing block origin）映射到其当前视觉位置。

   7. 将 capture 的 旧 writing-mode 设为 element 上 writing-mode 的计算值。

   8. 将 capture 的 旧 direction 设为 element 上 direction 的计算值。

   9. 将 capture 的 旧 text-orientation 设为 element 上 text-orientation 的计算值。

   10. 将 capture 的 旧 mix-blend-mode 设为 element 上 mix-blend-mode 的计算值。

   11. 将 capture 的 旧 backdrop-filter 设为 element 上 backdrop-filter 的计算值。

   12. 将 capture 的 旧 color-scheme 设为 element 上 color-scheme 的计算值。

   13. 令 transitionName 为 element 的 view-transition-name 的计算值。

   14. 将 namedElements[transitionName] 设为 capture。

10. 对于每个 element 属于 captureElements：

    1. 将 element 的 视图过渡捕获状态（captured in a view transition） 设为 false。

1. 令 document 为 transition 的 相关全局对象（relevant global object）的 关联文档（associated document）。

2. 令 namedElements 为 transition 的 命名元素（named elements）。

3. 令 usedTransitionNames 为新的字符串集合（set）。

4. 对于每个 element，属于所有已连接的元素（connected element），且其节点文档等于 document，按绘制顺序（paint order）遍历：

   1. 如果该 element 的任何平坦树（flat tree）祖先跳过其内容（skips its contents），则继续（continue）。

   2. 令 transitionName 为 element 的 view-transition-name 的计算值（computed value）。

   3. 如果 transitionName 为 none，或 element 未被渲染（not rendered），则继续。

   4. 如果 usedTransitionNames 包含 transitionName，则返回失败。

   5. 添加 transitionName 到 usedTransitionNames。

   6. 如果 namedElements[transitionName] 不存在，则将 namedElements[transitionName] 设为新的捕获元素结构体（captured element struct）。

      注意：我们特意将该结构体加入有序映射的末尾。这意味着仅存在于新 DOM 的名称（入场动画）会绘制在仅存在于旧 DOM 的名称（离场动画）和同时存在于新旧 DOM 的名称（配对动画）之上。这未必适用于所有分层情况，参见issue 8941。

   7. 将 namedElements[transitionName] 的 新元素（new element） 设为 element。

注意：该算法构建了用于过渡的伪元素树，并生成了初始样式。 伪树的结构在更高级别的 § 3.2 视图过渡伪元素 中介绍。

1. 令 document 为 当前对象（this）的 相关全局对象的 关联文档（associated document）。

2. 将 document 的 显示视图过渡树（show view transition tree）设为 true。

3. 对于每对 transitionName → capturedElement 属于 transition 的 命名元素（named elements）：

   1. 令 group 为新的 ::view-transition-group()，其 视图过渡名称（view transition name） 设为 transitionName。

   2. 将 group 添加到 transition 的 过渡根伪元素（transition root pseudo-element）。

   3. 令 imagePair 为新的 ::view-transition-image-pair()，其 视图过渡名称 设为 transitionName。

   4. 将 imagePair 添加到 group。

   5. 如果 capturedElement 的 旧图像（old image） 不为 null，则：

      1. 令 old 为新的 ::view-transition-old()，其 视图过渡名称 设为 transitionName，并以 capturedElement 的 旧图像 作为其 替换内容（replaced content）显示。

      2. 将 old 添加到 imagePair。

   6. 如果 capturedElement 的 新元素（new element） 不为 null，则：

      1. 令 new 为新的 ::view-transition-new()，其 视图过渡名称 设为 transitionName。

         注意：该伪元素的样式由 更新伪元素样式（update pseudo-element styles）处理。

      2. 将 new 添加到 imagePair。

   7. 如果 capturedElement 的 旧图像为 null，则：

      1. 断言（Assert）：capturedElement 的 新元素 不为 null。

      2. 将 capturedElement 的 图像动画名称规则（image animation name rule） 设为新的 CSSStyleRule，表示如下 CSS，并添加到 document 的 动态视图过渡样式表（dynamic view transition style sheet）：

         :root::view-transition-new(transitionName) {
           animation-name: -ua-view-transition-fade-in;
         }
         

         注意：上述代码示例包含待替换的变量。

   8. 如果 capturedElement 的 新元素为 null，则：

      1. 断言：capturedElement 的 旧图像 不为 null。

      2. 将 capturedElement 的 图像动画名称规则 设为新的 CSSStyleRule，表示如下 CSS，并添加到 document 的 动态视图过渡样式表：

         :root::view-transition-old(transitionName) {
           animation-name: -ua-view-transition-fade-out;
         }
         

         注意：上述代码示例包含待替换的变量。

   9. 如果 capturedElement 的 旧图像和 新元素均不为 null，则：

      1. 令 transform 为 capturedElement 的 旧变换（old transform）。

      2. 令 width 为 capturedElement 的 旧宽度（old width）。

      3. 令 height 为 capturedElement 的 旧高度（old height）。

      4. 令 backdropFilter 为 capturedElement 的 旧 backdrop-filter。

      5. 将 capturedElement 的 组关键帧规则（group keyframes） 设为新的 CSSKeyframesRule，表示如下 CSS，并添加到 document 的 动态视图过渡样式表：

         @keyframes -ua-view-transition-group-anim-transitionName {
           from {
             transform: transform;
             width: width;
             height: height;
             backdrop-filter: backdropFilter;
           }
         }
         

         注意：上述代码示例包含待替换的变量。

      6. 将 capturedElement 的 组动画名称规则（group animation name rule） 设为新的 CSSStyleRule，表示如下 CSS，并添加到 document 的 动态视图过渡样式表：

         :root::view-transition-group(transitionName) {
           animation-name: -ua-view-transition-group-anim-transitionName;
         }
         

         注意：上述代码示例包含待替换的变量。

      7. 将 capturedElement 的 图像对隔离规则（image pair isolation rule） 设为新的 CSSStyleRule，表示如下 CSS，并添加到 document 的 动态视图过渡样式表：

         :root::view-transition-image-pair(transitionName) {
           isolation: isolate;
         }
         

         注意：上述代码示例包含待替换的变量。

      8. 将 capturedElement 的 图像动画名称规则 设为新的 CSSStyleRule，表示如下 CSS，并添加到 document 的 动态视图过渡样式表：

         :root::view-transition-old(transitionName) {
           animation-name: -ua-view-transition-fade-out, -ua-mix-blend-mode-plus-lighter;
         }
         :root::view-transition-new(transitionName) {
           animation-name: -ua-view-transition-fade-in, -ua-mix-blend-mode-plus-lighter;
         }
         

         注意：上述代码示例包含待替换的变量。

         注意：mix-blend-mode: plus-lighter 可确保旧图像和新图像相同像素的混合结果为相同色值，实现“正确”的交叉淡入淡出。

注意： 该步骤对每一个 ViewTransition 都保证会被调用，即使该过渡已被跳过。原因详见 § 1.4 作为增强的过渡。

1. 断言：transition 的 阶段（phase）为 "done"，或在 "update-callback-called" 之前。

2. 令 callbackPromise 为 null。

3. 如果 transition 的 更新回调（update callback）为 null，则将 callbackPromise 设为 解析为 undefined 的 promise，位于 transition 的 相关 Realm。

4. 否则，将 callbackPromise 设为调用 transition 的 更新回调的结果。

5. 如果 transition 的 阶段不是 "done"，则将其 阶段设为 "update-callback-called"。

6. 令 fulfillSteps 为以下步骤：

   1. 激活视图过渡（Activate view transition） transition。

   2. 解决（Resolve） transition 的 update callback done promise，值为 undefined。

      注意：若上一步已解决该 promise，则本步无影响。

7. 令 rejectSteps 为下列步骤，参数为 reason：

   1. 拒绝（Reject） transition 的 update callback done promise，原因为 reason。

   2. 如果 transition 的 阶段为 "done"，则返回。

      注意：如果 transition 在此之前被跳过，就会发生这种情况。

   3. 标记为已处理（Mark as handled） transition 的 ready promise。

      注意：transition 的 update callback done promise 会提供 unhandledrejection。本步避免重复。

   4. 跳过视图过渡（Skip the view transition） transition，并传入 reason。

8. 监听 callbackPromise，当其解决时执行 fulfillSteps，拒绝时执行 rejectSteps。

9. 如需在超时后跳过过渡，用户代理可并行执行以下步骤：

   1. 等待一个实现自定义的时长（duration）。

   2. 在 DOM 操作任务源（DOM manipulation task source）上， 针对 transition 的 相关全局对象， 排队一个全局任务（Queue a global task），以执行以下步骤：

      1. 如果 transition 的 阶段为 "done"，则返回。

         注意：如果 transition 在此之前被跳过，就会发生这种情况。

      2. 跳过 transition，并抛出 "TimeoutError" DOMException。

1. 设定变量 document 为 transition 的 相关全局对象 的 关联文档。

2. 断言: transition 的 阶段不是 "完成"。

3. 如果 transition 的 阶段处于 "调用更新回调之前"，则在 transition 的 相关全局对象的基础上，队列一个全局任务到 DOM 操作任务来源，以调用更新回调。

4. 将 视图过渡的渲染抑制设置为 false。

5. 如果 document 的 活动视图过渡是 transition，则清除视图过渡 transition。

6. 将 transition 的 阶段设置为 "完成"。

7. 拒绝 transition 的 准备 promise，原因是 reason。

   注意: 此 准备 promise可能已经在此时被解析， 如果在开始动画后调用 skipTransition()， 则此步骤将无效。

8. 解析 transition 的 完成 promise，以 响应 transition 的 更新回调完成的 promise的结果：

   • 如果 promise 被满足，则返回 undefined。

   注意: 由于 transition 的 更新回调完成 promise 的拒绝未被显式处理， 如果 transition 的 更新回调完成 promise被拒绝， 则 transition 的 完成 promise将以相同原因被拒绝。

1. 如果 document 的 可见状态是 "隐藏"，则：

   1. 如果 document 的 活动视图过渡不是 null，则使用 "InvalidStateError" DOMException 跳过 document 的 活动视图过渡。

2. 否则，断言：活动视图过渡为空。

注意: 此步骤由 HTML 规范调用。

1. 如果 element 是 文档元素，那么：

   1. 渲染文档的区域（包括其 画布背景和任何顶层内容）， 该区域与 快照包含块相交， 在一个与 快照包含块大小相同的透明画布上， 按照捕获渲染特性及以下附加特性进行渲染：

      • 应将 element 的 滚动框外部区域渲染为已滚动到的状态，而不移动或调整 布局视口的大小。 此操作不得触发与滚动或调整大小相关的事件，例如 IntersectionObserver。

        

      • 不能滚动到的区域（即超出滚动边界的区域）， 应渲染为画布背景。

        

   2. 将此画布作为图像返回。 图像的自然大小等于 快照包含块。

2. 否则：

   1. 渲染 element 及其 后代， 按其在节点文档中显示的大小进行渲染， 在一个无限透明画布上， 按照捕获渲染特性进行渲染。

   2. 将此画布中包含 element 的 墨水溢出矩形的部分作为图像返回。 此图像的自然尺寸必须是其主边框盒的尺寸， 且其原点必须与此 边框盒的原点相对应， 以使图像表示此 边框盒的内容，且任何捕获的 墨水溢出在这些边界之外表示。

      注意: 当此图像以其自然大小作为替换元素渲染时， 它将显示元素的 主盒的大小和内容， 捕获的 墨水溢出将溢出其内容盒。

• 如果引用的元素或其祖先应用了变换（transform），则忽略该变换。

  注意: 此变换通过相关的 ::view-transition-group 伪元素的 transform 属性应用于快照。

• 应用于元素及其后代的效果，例如 不透明度（opacity） 和 滤镜（filter），会应用到捕获中。 从其祖先应用于元素的效果将被忽略。

• 如果墨水溢出矩形超出某些实现定义的最大值，可能会被裁剪。 然而，捕获的图像至少应该包含与 快照包含块相交的 element 的内容。 实现可能会调整光栅化质量，以适应通过变换进入视图的大墨水溢出区域的元素。

• 对于每个 descendant 的 包括阴影的后代 元素（Element） 和 伪元素的 element， 如果 descendant 被捕获在视图过渡中， 则跳过绘制 descendant。

  注意: 这是必要的，因为后代会生成自己的快照，并独立显示和动画。

1. 设定变量 document 为 transition 的 相关全局对象 的 关联文档。

2. 设定 hasActiveAnimations 为布尔值，初始值为 false。

3. 对于每个 element 的 transition 的 过渡根伪元素 的 包含后代：

   1. 对于每个 animation，其 时间轴 是与 document 关联的 文档时间轴， 并包含至少一个 关联效果， 其 效果目标 是 element， 如果以下任何条件为真，则将 hasActiveAnimations 设置为 true：

      • animation 的 播放状态 是 暂停 或 运行。

      • document 的 挂起动画事件队列 有任何与 animation 相关的事件。

4. 如果 hasActiveAnimations 为 false：

   1. 将 transition 的 阶段 设置为 "完成"。

   2. 清除视图过渡 transition。

   3. 解析 transition 的 完成的 promise。

   4. 返回。

5. 如果 transition 的 初始快照包含块大小 不等于 快照包含块大小， 则跳过视图过渡 transition，并返回。

6. 更新伪元素样式 transition。

   如果返回失败，则跳过视图过渡 transition，并在 transition 的 相关领域中返回 "InvalidStateError" DOMException。

   注意: 上述内容表明，传入元素的大小或位置的变化将导致生成新的关键帧。 这可能导致视觉跳跃。 我们可以平滑地重新定位，但没有用例来证明其复杂性的合理性。 有关详细信息，请参阅 第7813号问题。

1. 对于每个 transitionName → capturedElement 的 transition 的 命名元素：

   1. 将 width, height, transform, writingMode, direction, textOrientation, mixBlendMode, backdropFilter 和 colorScheme 设置为 null。

   2. 如果 capturedElement 的 新元素 为 null，那么：

      1. 将 width 设置为 capturedElement 的 旧宽度。

      2. 将 height 设置为 capturedElement 的 旧高度。

      3. 将 transform 设置为 capturedElement 的 旧变换。

      4. 将 writingMode 设置为 capturedElement 的 旧写入模式。

      5. 将 direction 设置为 capturedElement 的 旧方向。

      6. 将 textOrientation 设置为 capturedElement 的 旧文本方向。

      7. 将 mixBlendMode 设置为 capturedElement 的 旧混合模式。

      8. 将 backdropFilter 设置为 capturedElement 的 旧背景滤镜。

      9. 将 colorScheme 设置为 capturedElement 的 旧配色方案。

   3. 否则：

      1. 如果以下任何条件为真，则返回失败：

         • capturedElement 的 新元素 有一个 扁平树 祖先，且 跳过其内容。

         • capturedElement 的 新元素是 未渲染的。

         • capturedElement 有多个 盒片段。

         注意: 其他渲染约束通过 capturedElement 的 新元素 被 捕获在视图过渡中 强制执行。

      2. 将 width 设置为 capturedElement 的 新元素 的 边框盒 的当前宽度。

      3. 将 height 设置为 capturedElement 的 新元素 的 边框盒 的当前高度。

      4. 将 transform 设置为一个变换，以将capturedElement 的 新元素 的 边框盒 从 快照包含块原点 映射到其当前视觉位置。

      5. 将 writingMode 设置为 capturedElement 的 计算值 的 写入模式。

      6. 将 direction 设置为 capturedElement 的 计算值 的 方向。

      7. 将 textOrientation 设置为 capturedElement 的 计算值 的 文本方向。

      8. 将 mixBlendMode 设置为 capturedElement 的 计算值 的 混合模式。

      9. 将 backdropFilter 设置为 capturedElement 的 计算值 的 背景滤镜。

      10. 将 colorScheme 设置为 capturedElement 的 计算值 的 配色方案。

   4. 如果 capturedElement 的 组样式规则 为 null， 则将 capturedElement 的 组样式规则 设置为一个新的 CSSStyleRule 表示以下 CSS， 并将其附加到 transition 的 相关全局对象 的 关联文档 的 动态视图过渡样式表。

      否则，更新 capturedElement 的 组样式规则 以匹配以下 CSS：

      :root::view-transition-group(transitionName) {
        width: width;
        height: height;
        transform: transform;
        writing-mode: writingMode;
        direction: direction;
        text-orientation: textOrientation;
        mix-blend-mode: mixBlendMode;
        backdrop-filter: backdropFilter;
        color-scheme: colorScheme;
      }
      

      注意: 上述代码示例包含需要替换的变量。

   5. 如果 capturedElement 的 新元素 不为 null，那么：

      1. 设定 new 为 ::view-transition-new() ，使用视图过渡名称 transitionName。

      2. 将 new 的 替换元素 内容设置为通过 捕获图像 所得的结果， 即 capturedElement 的 新元素。

如果其效果可以被 Web API 观察到，则必须执行此算法以更新用户代理源中的样式。

注意：此类 Web API 的一个示例是 window.getComputedStyle(document.documentElement, "::view-transition")。

1. 设定变量 document 为 transition 的 相关全局对象 的 关联文档。

2. 断言: document 的 活动视图过渡是 transition。

3. 对于每个 capturedElement 的 transition 的 命名元素的 值：

   1. 如果 capturedElement 的 新元素 不为 null， 则将 capturedElement 的 新元素 的 捕获在视图过渡中 设置为 false。

   2. 对于每个 style 的 capturedElement 的 样式定义：

      1. 如果 style 不为 null， 且 style 在 document 的 动态视图过渡样式表 中， 则从 document 的 动态视图过渡样式表 中移除 style。

4. 将 document 的 显示视图过渡树 设置为 false。

5. 将 document 的 活动视图过渡 设置为 null。