Baseline 最新动态：为进入效果添加动画
使用内容集保持井井有条根据您的偏好保存内容并进行分类。

发布时间：2024 年 8 月 8 日

Una Kravets

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

使用 `@starting-style` 设置进入效果

浏览器支持

来源

@starting-style 规则定义元素在页面上呈现之前的初始样式。这对于从 display: none 动画进入的元素是必需的，因为它们需要一个可以从中动画进入的状态。

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

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

使用 `allow-discrete` 启用离散动画

浏览器支持

来源

支持从 display: none（例如对话框和弹出框）动画进入的元素的进入动画所需的第二件事是启用新的动画模式，以支持离散属性的动画。离散属性是指那些无法在值之间插值的属性。您可以将它们想象成一个开/关开关。一些示例包括 display、visibility、mix-blend-mode，即功能是一个值或另一个值的任何属性。借助这种新的动画模式，浏览器现在支持在过渡的 50% 点而不是 0% 点交换值。

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

具有值 allow-discrete 的独立属性 transition-behavior。
过渡简写形式中的 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 嵌套更简洁地编写此代码，CSS 嵌套也是一项 Baseline newly available 功能。

浏览器支持

来源

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 功能”，要了解有关这些功能的更多信息，请查看以下文档资源

Baseline 最新动态：为进入效果添加动画 使用内容集保持井井有条 根据您的偏好保存内容并进行分类。

使用 @starting-style 设置进入效果

使用 allow-discrete 启用离散动画

演示：将所有内容整合在一起

总结

Baseline 最新动态：为进入效果添加动画
使用内容集保持井井有条根据您的偏好保存内容并进行分类。

使用 `@starting-style` 设置进入效果

使用 `allow-discrete` 启用离散动画