博文中针对进入和退出效果的四项全新 CSS 功能分享了一些仅在 Chrome 中推出的实用功能。现在,随着 Firefox 129 的发布,其中两项功能 @starting-style 和 transition-behavior: allow-discrete 变成了 Baseline New 可用。您现在可以为元素创建进入动画效果,包括为 display: none
添加动画效果,以及为顶层添加动画效果。
使用 @starting-style
设置条目效果
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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
启用离散动画
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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 新推出的一项功能。
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <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 功能可实现流畅的进入和退出动画”一文。如需详细了解这些功能,请参阅以下文档资源: