transition-behavior

基线 2024

最新可用

自 2024 年 8 月起，此功能适用于最新的设备和浏览器版本。此功能可能不适用于旧设备或浏览器。

transition-behavior CSS 属性指定是否会为动画行为为 离散 的属性启动过渡。

语法

css
/* Keyword values */
transition-behavior: allow-discrete;
transition-behavior: normal;

/* Global values */
transition-behavior: inherit;
transition-behavior: initial;
transition-behavior: revert;
transition-behavior: revert-layer;
transition-behavior: unset;

值

allow-discrete

将为元素的离散动画属性启动过渡。

normal

将不会为元素的离散动画属性启动过渡。

描述

transition-behavior 属性仅在与其他过渡属性（尤其是 transition-property 和 transition-duration）结合使用时才相关，因为如果在非零持续时间内没有属性被动画化，则不会发生过渡。

css
.card {
  transition-property: opacity, display;
  transition-duration: 0.25s;
  transition-behavior: allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

transition-behavior 值可以作为简写 transition 声明的一部分包含。当包含在简写中时，在使用或默认为所有属性时，allow-discrete 值对常规可动画属性没有影响。以下 CSS 等同于上面的长写声明

css
.card {
  transition: all 0.25s;
  transition: all 0.25s allow-discrete;
}

.card.fade-out {
  opacity: 0;
  display: none;
}

在上面的代码段中，我们包含了 transition 属性两次。第一个实例不包含 allow-discrete 值 - 这提供了跨浏览器支持，确保卡片的其他属性仍然在不支持 transition-behavior. 的浏览器中过渡。

离散动画行为

离散动画属性通常在动画在两个值之间动画到 50% 时在这两个值之间翻转。

但是，有一个例外，即当动画到或从 display: none 或 content-visibility: hidden 时。在这种情况下，浏览器将在两个值之间翻转，以便过渡的内容在整个动画持续时间内显示。

所以例如

  • 当动画 display 从 none 到 block（或其他可见 display 值）时，该值将在动画持续时间的 0% 时翻转到 block，以便在整个过程中可见。
  • 当动画 display 从 block（或其他可见 display 值）到 none 时，该值将在动画持续时间的 100% 时翻转到 none，以便在整个过程中可见。

正式定义

初始值normal
应用于所有元素
继承否
计算值如指定
动画类型不可动画

正式语法

transition-behavior = 
  <transition-behavior-value>#  

<transition-behavior-value> = 
  normal          |
  allow-discrete

示例

过渡弹出框

在此示例中，一个 弹出框 在它从隐藏到显示，然后再从显示到隐藏时 过渡。

HTML

HTML 包含一个使用 <div> 元素声明的弹出框，该元素使用 popover 属性，以及一个使用其 popovertarget 属性指定为弹出框的显示控件的 <button> 元素。

html
<button popovertarget="mypopover">Show the popover</button>
<div popover="auto" id="mypopover">I'm a Popover! I should animate.</div>

CSS

css
[popover]:popover-open {
  opacity: 1;
  transform: scaleX(1);
}

[popover] {
  /* Final state of the exit animation */
  opacity: 0;
  transform: scaleX(0);

  transition-property: opacity, transform, overlay, display;
  transition-duration: 0.7s;
  transition-behavior: allow-discrete;
  /* Using the shorthand transition property, we could write:
    transition: 
      opacity 0.7s,
      transform 0.7s,
      overlay 0.7s allow-discrete,
      display 0.7s allow-discrete;

    or even:
    transition: all 0.7s allow-discrete;
  */
}

/* Needs to be included after the previous [popover]:popover-open 
   rule to take effect, as the specificity is the same */
@starting-style {
  [popover]:popover-open {
    opacity: 0;
    transform: scaleX(0);
  }
}

我们要动画的两个属性是 opacity 和 transform：我们希望弹出框在水平方向上放大和缩小，同时淡入淡出。我们为弹出框元素的默认隐藏状态（通过 [popover] 选择）设置了这些属性的起始状态，并为弹出框的打开状态（通过 :popover-open 伪类选择）设置了结束状态。然后我们设置 transition 属性，在两者之间进行动画。

由于动画元素在显示时被提升到 顶层，而在隐藏时从顶层移除 - 这也意味着它的隐藏状态在它上面设置了 display: none - 以下属性被添加到过渡元素列表中，以便在两个方向上获得动画效果。在这两种情况下，transition-behavior: allow-discrete 都被设置为简写，以启用离散动画。

  • display: 必须设置，以便在进入和退出动画的整个过程中，动画元素始终可见（设置为 display: block）。如果没有此设置，退出动画将不可见；实际上，弹出框会直接消失。
  • overlay: 必须设置，以确保元素从顶层移除的操作推迟到动画完成之后。对于像这个简单的动画，这一点影响并不大，但在更复杂的情况下，如果不这样做会导致元素过早地从叠层中移除，从而导致动画不流畅或无效。

此外，在 @starting-style at-规则中设置了动画的初始状态。这是为了避免出现意外行为。默认情况下，元素第一次更新样式或 display 类型从 none 变为其他类型时，不会触发过渡。@starting-style 允许您以特定可控的方式覆盖默认行为。如果没有此设置，进入动画将不会发生，弹出框会直接出现。

结果

代码渲染如下

注意： 由于弹出框每次显示时都从 display: none 变为 display: block，因此弹出框每次进入过渡时都会从其 @starting-style 样式过渡到其 [popover]:popover-open 样式。当弹出框关闭时，它会从其 [popover]:popover-open 状态过渡到默认的 [popover] 状态。

在这种情况下，进入和退出时的样式过渡可能是不同的。请参阅我们的 何时使用起始样式演示 示例，了解这方面的证明。

规范

规范
CSS 过渡级别 2
# transition-behavior-property

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见