使用@starting-style簡化入口動畫

創建流暢的進入動畫可能具有挑戰性。 DOM 載入時間和 display: none 動畫的複雜性通常會導致令人沮喪的結果。 @starting-style 規則提供了一個簡化的解決方案，可讓您在元素首次出現時明確定義 CSS 屬性的初始值，從而確保從一開始就無縫過渡。

在這裡探索完整文章和更多範例。

---

了解基礎

@starting-style 設定 CSS 屬性 在 元素變得可見之前的初始狀態 - 它的「之前」狀態。 「之後」狀態是在標準 CSS 規則中定義的。 其工作原理如下：

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

  @starting-style {
    opacity: 0;
  }
}

初始載入時，@starting-style 將元素的不透明度設為 0。然後它平滑地過渡到最終狀態（在本例中不透明度：1）。當元素從 display: none 過渡到可見時，此功能也適用，使其非常適合對切換元素進行動畫處理。

利用@starting-style

您可以透過兩種方式套用 @starting-style：嵌套在元素的規則集中（不需要選擇器）或使用選擇器單獨定義。

重要提示：在偽元素（如 @starting-style 或 ::before）內嵌套 ::after 將無法如預期運作。樣式會影響父元素，而不是偽元素。

/* 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;
  }
}

關鍵考慮因素： @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中文網其他相關文章！