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

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

浏览器支持

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

您可以使用以下两种方法之一为 display: nonevisibility: 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 功能可实现流畅的进入和退出动画”一文。如需详细了解这些功能,请参阅以下文档资源: