现已推出基准功能：为进入效果添加动画效果

Una Kravets

博文中针对进入和退出效果的四项全新 CSS 功能分享了一些仅在 Chrome 中推出的实用功能。现在，随着 Firefox 129 的发布，其中两项功能 @starting-style 和 transition-behavior: allow-discrete 变成了 Baseline New 可用。您现在可以为元素创建进入动画效果，包括为 display: none 添加动画效果，以及为顶层添加动画效果。

使用 @starting-style 设置条目效果

浏览器支持

  • Chrome：117。 <ph type="x-smartling-placeholder">
  • Edge：117。 <ph type="x-smartling-placeholder">
  • Firefox：129。 <ph type="x-smartling-placeholder">
  • Safari：17.5。 <ph type="x-smartling-placeholder">

来源

@starting-style 规则用于定义元素在网页上呈现之前的初始样式。这对于从 display: none 以动画形式传入的元素而言是必需的，因为它们需要一个作为动画效果的起始状态。

像使用 CSS 中的任何其他 @ 规则一样，通过将元素的样式放置在 @starting-style 中，来使用 @starting-style。例如，使用 <dialog> 时，将 dialog[open] 样式放置在 @starting-style 规则中。这些是在打开对话框之前使用的样式。

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

使用 allow-discrete 启用离散动画

浏览器支持

  • Chrome：117。 <ph type="x-smartling-placeholder">
  • Edge：117。 <ph type="x-smartling-placeholder">
  • Firefox：129。 <ph type="x-smartling-placeholder">
  • Safari：17.4. <ph type="x-smartling-placeholder">

来源

对于通过 display: none 添加动画效果的元素（例如对话框和弹出式窗口）支持进入动画，其次需要启用新的动画模式，以便支持离散属性的动画。离散属性是指无法在值之间插值的属性。您可以把它们想象成一个开/关开关。一些示例包括 display、visibility、mix-blend-mode，即特征为一个值或另一个值的任何属性。借助这一新的动画模式，浏览器现在支持在过渡点的 50% 处（而不是 0% 处）交换值。

您可以使用以下两种方法之一为 display: none 和 visibility: hidden 元素添加进入效果动画效果：

  • 独立属性 transition-behavior，值为 allow-discrete。
  • 过渡效果简写中的 allow-discrete 值。

我们推荐第二种方法，因为应用 transition-behavior 包含在 transition 简写形式中。如果您在应用转场、计时和加/减速函数的过渡简写形式之前应用 transition-behavior: allow-discrete，浏览器将忽略 transition-behavior。

如果在简写形式中使用此属性，您只需将 allow-discrete 关键字应用于需要离散动画的特定属性。以下 CSS 对此进行了演示，该 CSS 同时转换了 translate 属性和 display 属性，但仅将 allow-discrete 关键字应用于 display 属性。

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

演示：综合应用

使用这些地图项对顶层元素特别有用，例如 <dialog> 元素或使用 popover 属性的组件。在以下示例中，<dialog> 元素从视口底部（最初从屏幕外的 100vh 垂直平移开始）到视口中心以动画形式呈现，在 <dialog> 打开时移除平移。

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

您可以使用 CSS 嵌套以更简洁的方式编写代码，这也是 Baseline 新推出的一项功能。

浏览器支持

  • Chrome：120。 <ph type="x-smartling-placeholder">
  • 边缘：120。 <ph type="x-smartling-placeholder">
  • Firefox：117。 <ph type="x-smartling-placeholder">
  • Safari：17.2. <ph type="x-smartling-placeholder">

来源

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}
。
在对话框元素中演示动画效果。

总结

看到 Baseline 中这样的进展令人兴奋，至少，这是对这些元素的渐进式增强。如果没有这些进入效果功能，为顶层或 display: none 样式添加动画效果的元素将直接显示在您的页面上，不会像现在一样进行过渡。

如需了解如何以渐进增强的方式添加退出效果，请参阅“四个新 CSS 功能可实现流畅的进入和退出动画”一文。如需详细了解这些功能，请参阅以下文档资源：