CSS 过渡级别 2

1. Delta 规范

这是一个 Delta 规范，意味着它目前仅包含与 CSS Transitions Level 1 [CSS-TRANSITIONS-1] 的不同之处。 一旦 Level 1 规范接近完成，它将与这里的添加内容合并为完整的第 2 级规范。

2. 过渡

2.1. transition-property 属性

从 CSS Transitions § 2.1 transition-property 属性 插入文本并向后移植以下段落。

尽管 transition-property 可以指定简写属性并且可以使用 all 关键字，但会为每个可过渡的长格式子属性生成单独的过渡。过渡的 扩展过渡属性名称 是为其生成过渡的长格式子属性的名称（例如 border-left-width）。

一旦从第 1 级移植，更新 transitionable 的定义实例。

在 CSS Transitions Level 2 中，当比较给定属性的 变更前样式 和 变更后样式 时，属性值是 可过渡的 如果：

1. 它们具有既非 不可动画 也非 离散 的 动画类型，或
2. transition-behavior 是 allow-discrete 并且它们具有 动画类型，且该类型为 离散。

注意： 当具有 离散 动画类型 的值过渡时，它们会在进度达到 50% 时翻转。

2.2. transition-duration 属性

transition-duration 属性指定过渡关联的 迭代持续时间。

2.3. transition-timing-function 属性

transition-timing-function 属性指定过渡关联的 时间函数（请参阅 Web Animations § 4.10 时间变换）。

注意： 与 CSS 动画不同，CSS 过渡的时间函数应用于动画效果而非单个关键帧，因为这允许它在计算反转缩短因子时反映在变换进度中。

2.4. transition-delay 属性

transition-delay 属性指定过渡关联的 开始延迟。

2.5. transition-behavior 属性

transition-behavior 属性指定是否为离散属性启动过渡。

指定 transition-behavior 的语法如下：

当指定为 normal 时，过渡将不会为离散属性启动，只会为可插值属性启动。当指定为 allow-discrete 时，过渡将为离散属性和可插值属性启动。

2.6. transition 简写属性

指定 transition 简写项的语法如下：

3. 过渡的开始

过渡的 拥有元素 是指应用了 transition-property 属性并生成动画的元素或伪元素。 过渡可能会与其 拥有元素 解除关联，以至于它没有 拥有元素。

正在运行的过渡 集合只包括那些有 拥有元素 的过渡。

每当需要实现 取消 过渡时， 它必须将过渡与其 拥有元素 解除关联，并按照 取消动画 的过程取消该过渡。

虽然在本规范第 1 级中未明确定义， 但除了取消不再 连接 的元素上的过渡外， 实现还必须取消所有不再 渲染 的元素上的正在运行的过渡，并将它们从 已完成过渡 集合中移除。

请注意，调用表示 正在运行的过渡 的 cancel() 方法并不会导致该过渡与其 拥有元素 解除关联。

3.1. 更快地反转中断的过渡

为了产生正确的反转行为，过渡的 反转缩短因子 和 反转调整的起始值 是与过渡本身相关的，而不是与其 动画效果 相关的。 因此，即使过渡的关联 动画效果 已使用 Web Animations API [WEB-ANIMATIONS] 进行更新或替换，过渡仍将使用这些相同的值来生成反向过渡。

3.2. 当前过渡生成

与每个顶级浏览上下文相关联的是一个 当前过渡生成，在每次 样式更改事件 时递增。

每次生成新的过渡时，当前（已递增的）当前过渡生成 的值将存储为过渡的 过渡生成。

3.3. 定义 变更前样式：@starting-style 规则

在本规范第 1 级中，过渡只能在元素具有由先前 样式更改事件 确定的变更前样式 的情况下开始。这意味着无法在之前的 样式更改事件 中未被渲染的元素上启动过渡（请参见：CSS 过渡 § 3 过渡的开始）。

在某些情况下，有必要在新插入的元素或从未被渲染到被渲染的元素上启动过渡。为此，本规范引入了 @starting-style。

@starting-style 规则是一个分组规则。内部的样式规则用于确定要过渡的样式，如果之前的 样式更改事件 未为正在计算样式的元素建立 变更前样式。

注意： 这意味着 @starting-style 规则仅适用于某些元素在计算样式更新期间，即那些在之前的 样式更改事件 中未渲染或不属于 DOM 的元素。

定义起始样式 为元素的变更后样式，并额外应用@starting-style规则。如果某元素对于某个样式变更事件没有变更前样式，则使用起始样式代替变更前样式，与变更后样式进行比较以启动过渡 (CSS Transitions § 3 过渡的开始)。

@starting-style 中的规则像其他分组样式规则一样级联，不会在级联中引入任何新顺序，这意味着 @starting-style 中的规则不一定会胜过外部规则。

@starting-style 中的样式规则不适用于 变更后样式。 因此，在 @starting-style 中存在匹配规则的情况下，可能会在本来无法过渡的元素上发生过渡，因为它们缺少 变更前样式。

起始样式 像 变更后样式 一样继承自父元素的 变更后样式。

h1 {
  transition: background-color 1.5s;
  background-color: green;
}
@starting-style {
  h1 {
    background-color: transparent;
  }
}

h1 {
  transition: background-color 1.5s;
  background-color: green;
  @starting-style {
    background-color: transparent;
  }
}

#target {
  transition-property: opacity, display;
  transition-duration: 0.5s;
  display: block;
  opacity: 1;
  @starting-style {
    opacity: 0;
  }
}
#target.hidden {
  display: none;
  opacity: 0;
}

全局的、定义名称的 @ 规则，如 @keyframes、@font-face 和 @layer，可以在 @starting-style 中使用，并且它们的行为就像位于 @starting-style 之外一样。

3.3.1. CSSStartingStyleRule 接口

CSSStartingStyleRule 接口表示 @starting-style 规则。

[Exposed=Window]
interface CSSStartingStyleRule : CSSGroupingRule {
};

4. 过渡的应用

4.1. 动画的合成顺序

根据本规范定义的标记生成的 动画 具有‘CSS 过渡’的 动画类。

CSS 过渡的合成顺序 早于 CSS 动画和没有特定 动画类 的动画。

在 CSS 过渡集中，两个动画 A 和 B 的合成顺序（从先到后）按以下规则排序：

1. 如果 A 和 B 都没有 拥有元素， 则根据它们在 全局动画列表中的相对位置排序。

2. 否则，如果 A 或 B 中只有一个有 拥有元素，则让有 拥有元素 的动画排在前面。

3. 否则，如果 A 和 B 的 拥有元素 不同，则根据其对应的 拥有元素 的 树顺序 对 A 和 B 进行排序。 对于伪元素，排序顺序如下：

   • 元素

   • ::marker

   • ::before

   • 其他未在此列表中特别提及的伪元素，按组成每个选择器的 Unicode 代码点升序排序

   • ::after

   • 元素子项

4. 否则，如果 A 和 B 的 过渡生成 值不同，则按其对应的 过渡生成 升序排序。

5. 否则，按组成每个过渡的 扩展过渡属性名称 的 Unicode 代码点升序排序（即不尝试进行大小写转换，并且‘-moz-column-width’ 排在‘column-width’之前）。

使用本规范定义的标记生成的过渡在创建时不会被添加到 全局动画列表中。 相反，这些动画在与其 拥有元素 解除关联后，在首次退出 空闲播放状态 时才会被附加到 全局动画列表。 与其 拥有元素 解除关联但仍处于 空闲 状态的过渡没有定义的合成顺序。

注意，此行为依赖于将过渡与其 拥有元素 解除关联始终会使其进入（或保持在）空闲播放状态。

4.2. 动画的层叠级别

具有‘CSS 过渡’ 动画类 并拥有 拥有元素 的动画 应用在 CSS 层叠中的‘过渡声明’级别。 所有其他由本规范定义的标记生成的动画，包括不再具有 拥有元素 的动画， 应用在层叠的‘动画声明’级别。 （参见 Web Animations § 5.4.5 合成结果的应用。）

5. 过渡事件

5.1. 事件分派

注意，这一部分比 CSS Transitions Level 1 [CSS-TRANSITIONS-1] 中的事件分派更通用，因为它必须考虑使用 Web Animations API [WEB-ANIMATIONS] 时动画的定位或反转的可能性。此外，通过 Web Animations API， 可以用完全不同的效果（例如重复多次的效果）替代过渡效果，因此该部分提供了适应 Web Animations 模型复杂性的通用定义。

过渡事件的 目标 是过渡的 拥有元素。 如果没有 拥有元素，则不会分派过渡事件 （但在 Web Animations 中定义的 动画播放事件 仍然会在相应的 CSSTransition 对象上分派）。

为了避免触发冗余事件，分派的事件集是基于比较过渡在之前的 动画帧 和当前状态的 阶段 来确定的。

过渡的 过渡阶段 初始为“空闲”状态， 并在每个 动画帧 更新，依据以下第一个匹配条件：

如果过渡没有 关联效果，

过渡阶段根据以下第一个匹配条件设置：

如果过渡具有 未解析的 当前时间，

过渡阶段为“空闲”。

如果过渡的 当前时间 < 0，

过渡阶段为“之前”。

否则，

过渡阶段为“之后”。

如果过渡有 待播放任务 或 待暂停任务，并且其阶段先前为“空闲”或“待处理”，

过渡阶段为“待处理”。

否则，

过渡阶段为其 关联效果的阶段。

为了计算每个事件的 elapsedTime，使用以下定义：

• 区间开始 = max(min(-开始延迟, 活动持续时间), 0)

• 区间结束 = max(min(关联效果结束 - 开始延迟, 活动持续时间), 0)

在上述公式中，引用的 开始延迟、活动持续时间、当前迭代、迭代开始 和 迭代持续时间 应理解为引用过渡的 关联效果 的相应属性。

每次建立新的 动画帧 时， 通过比较前一帧和当前帧的 过渡阶段 确定要分派的事件：

٭ 当多个事件被列为状态变化时，所有事件都会按列出的顺序立即依次分派。

由于上表和上述过程中定义的elapsed time是以毫秒为单位表示的，因此必须除以 1,000 才能生成秒值，然后将其分配给elapsedTime成员 TransitionEvent。

6. DOM接口

6.1. CSSTransition接口

[Exposed=Window]
interface CSSTransition : Animation {
  readonly attribute CSSOMString transitionProperty;
};

transitionProperty, 类型为CSSOMString，只读

该过渡的扩展过渡属性名称。

6.2. 挂起样式更改的要求

各种操作可能会影响元素属性的计算值。用户代理可能出于优化目的，延迟重新计算这些值，直到有必要时才进行。 然而，所有包括在此规范定义的编程接口中的操作，以及Web Animations定义的那些可能返回由此规范定义的对象的操作[WEB-ANIMATIONS]，必须产生与完全处理任何此类挂起的计算值更改一致的结果。

elem.style.transition = 'opacity 100s';
elem.style.opacity = '0';
window.getComputedStyle(elem).opacity; // 0
elem.style.opacity = '1';
elem.getAnimations()[0].transitionProperty // 'opacity'

7. 隐私考虑

在本规范中没有报告新的隐私考虑。

8. 安全考虑

在本规范中没有报告新的安全考虑。

9. 变更

9.1. 自第一级别以来的变更，在首次公开工作草案中

• 现在可以对离散动画属性进行过渡。新引入的transition-behavior属性允许选择这种行为。
• 引入了@starting-style规则和CSSStartingStyleRule接口，以允许在从未渲染到已渲染的元素上进行过渡。
• 与Web Animations API的交互有了更清晰的规范：
  • 定义了CSSTransition接口。
  • 定义了生成动画的复合顺序。
  • 定义了生成动画的动画类。
  • 定义了通过Web Animations API重用的由过渡创建的动画对象的层叠级别，并定义了所需的拥有元素的概念。
  • 事件分派的规则已经被指定，以解释使用Web Animations API进行查找或反转动画时发生的情况。
  • 指定了Web Animations API与中断过渡的快速反转规则的交互。
  • 指定了§ 6.2 挂起样式更改的要求。
• 对不再渲染的元素上的过渡处理进行了更清晰的定义（这些过渡被取消并从已完成过渡集中移除）。

10. 常见的前几级规范中的问题

这些问题是前几级规范中常见的问题。

11. 前几级规范中推迟的问题

这些问题出现在前几级规范中，但在本级规范中可能也不会变得重要。