現已採用基準功能：為項目效果加上動畫效果

Una Kravets

這篇文章介紹了 Chrome 剛才登陸的幾個實用功能，說明四項全新的進入和離開效果的 CSS 功能。現在，「@starting-style」和「transition-behavior: allow-discrete」這兩個功能，在 Firefox 129 推出後，已成為「 Baseline 新支援」！您現在可以為元素建立輸入動畫效果，包括以 display: none 為動畫呈現的元素，以及在頂層圖層中建立動畫效果。

使用 @starting-style 設定項目特效

瀏覽器支援

  • Chrome：117。
  • Edge：117。
  • Firefox：129。
  • Safari：17.5。

資料來源

@starting-style 規則可定義元素的初始樣式，然後才顯示在網頁上。對於從 display: none 加入動畫的元素，此為必要項目，因為元素需要有動畫效果的狀態。

如同在 CSS 中的任何其他規則，使用 @starting-style 加入元素的樣式。舉例來說，如果使用 <dialog>，請將 dialog[open] 樣式放在 @starting-style 規則中。這些是對話方塊開啟前所使用的樣式。

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

使用 allow-discrete 啟用離散動畫

瀏覽器支援

  • Chrome：117。
  • Edge：117。
  • Firefox：129。
  • Safari：17.4。

資料來源

此外，如要支援從 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 示範如何同時轉換 translate 屬性和 display 屬性，但只會將 allow-discrete 關鍵字套用至 display 屬性。

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

示範：整合所有要點

這些功能對於頂層元素 (例如 <dialog> 元素或使用 popover 屬性的元件) 特別有用。在以下範例中，<dialog> 元素會從可視區域底部以動畫呈現 (最初是從螢幕外的 100 伏特垂直平移開始)，直到 <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 巢狀結構也是最新的基準功能。

瀏覽器支援

  • Chrome：120。
  • Edge：120。
  • Firefox：117。
  • Safari：17.2。

資料來源

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 樣式的元素，就和目前一樣，在不轉換效果的情況下顯示於網頁上。

如要瞭解如何逐步強化結束效果，請參閱「4 個全新的 CSS 功能，流暢進入及離開動畫」。如要進一步瞭解這些功能，請參閱以下說明文件資源：