display

2024-05-11 02:04| 来源: 网络整理| 查看: 265

支持的浏览器使用离散的动画类型设置 display 动画。这通常意味着，属性的值将在动画播放到 50% 时在两个值之间切换。

有一个例外，那就是将 display: none 设置为动画的开始或结束。这种情况下，浏览器会在这两个值之间切换，以便于在整个动画持续时间内显示动画内容。例如：

当将 display 动画设置为从 none 到 block（或另一个可见的 display 值）时，该值将在动画持续时间的 0% 处切换到 block，从而使其始终可见。当将 display 动画设置为从 block（或另一个可见的 display 值）到 none时，该值将在动画持续时间的 100% 处切换到 none，从而使其始终可见。

此行为对于创建入场/出场动画非常有用，例如，你想要使用 display: none 从 DOM 中删除一个容器，但又同时使用 opacity 将其淡出（而不是立即消失）。

在使用 CSS 动画为 display 设置动画时，需要在明确的关键帧（例如使用 0% 或 from）中提供开始的 display 值。有关示例，请参见使用 CSS 动画。

在使用 CSS 过渡为 display 设置动画时，需要两个额外的附加条件：

@starting-style 提供了要从第一次显示动画元素时开始过渡的属性的起始值。这是避免意外行为所必需的。默认情况下，CSS 过渡不会在元素的第一次样式更新时触发，也不会在 display 类型从 none 更改为另一种类型时触发。 transition-behavior: allow-discrete 需要在 transition-property 声明上设置，已启用 display 过渡。

有关 display 属性过渡的更多示例，请参见 @starting-style 和 transition-behavior。

【本文地址】

公司简介

联系我们