使用@starting-style简化入口动画

创建流畅的进入动画可能具有挑战性。 DOM 加载时间和 display: none 动画的复杂性通常会导致令人沮丧的结果。 @starting-style 规则提供了一个简化的解决方案，允许您在元素首次出现时显式定义 CSS 属性的初始值，从而确保从一开始就无缝过渡。

在此处探索完整文章和更多示例。

---

了解基础知识

@starting-style 设置 CSS 属性 在 元素变得可见之前的初始状态 - 它的“之前”状态。 “之后”状态是在标准 CSS 规则中定义的。 其工作原理如下：

<code class="language-css">element {
  transition: opacity 0.5s ease-in;
  opacity: 1;

  @starting-style {
    opacity: 0;
  }
}</code>

初始加载时，@starting-style 将元素的不透明度设置为 0。然后它平滑地过渡到最终状态（在本例中不透明度：1）。当元素从 display: none 过渡到可见时，此功能也适用，使其非常适合对切换元素进行动画处理。

利用@starting-style

您可以通过两种方式应用 @starting-style：嵌套在元素的规则集中（不需要选择器）或使用选择器单独定义。

重要提示：在伪元素（如 @starting-style 或 ::before）内嵌套 ::after 将无法按预期工作。样式会影响父元素，而不是伪元素。

<code class="language-css">/* Standalone */
@starting-style {
  element {
    opacity: 0;
  }
}

element {
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Nested */
element {
  opacity: 1;
  transition: opacity 0.5s ease-in;

  @starting-style {
    opacity: 0;
  }
}</code>

关键考虑因素： @starting-style 和“原始规则”具有相同的特异性。为了可靠的应用，请始终将 @starting-style at 规则 放在 “原始规则”

之后。

实际应用

@starting-style 擅长创建入口效果和过渡。 考虑将其用于页面加载时淡入文本或动画弹出窗口和对话框。 以下是几个示例：

动画来自 display: none

@starting-style 的主要好处是它能够为最初隐藏的元素创建平滑的过渡，特别是那些从 display: none 过渡的元素。 如果没有 @starting-style，由于缺乏定义的起始状态，因此很难对这种转换进行动画处理。 @starting-style 通过提供初始状态来解决这个问题。

dialog 元素提供了清晰的说明。它的主体在 display: none 和 display: block 之间切换。 由于 display 属性更改，因此通常不可能对其进行动画处理，但 @starting-style 使其可以实现。

页面加载时淡出和滑动

在此示例中，@starting-style 定义两个元素的“之前”状态。 淡入淡出效果将初始不透明度设置为 0，而幻灯片效果则使用左平移。

---

本文重点介绍入口动画。 @starting-style 不处理退出效果。 对于退出动画，您需要探索 transition-behavior，这是另一个讨论的主题。

阅读完整文章此处。 访问我的博客这里。

以上是使用@starting-style简化入口动画的详细内容。更多信息请关注PHP中文网其他相关文章！