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

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

瀏覽器支援

  • 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 產生動畫的元素 (例如對話方塊和彈出式視窗) 的輸入動畫,必須啟用新的動畫模式,支援離散屬性的動畫。離散屬性是指無法在值之間互譯的屬性。這就像是開啟/關閉開關。例如 displayvisibilitymix-blend-mode,也就是特徵是單一值的任何屬性。在這種新的動畫模式中,瀏覽器現在支援在 50% 點交換值,而不是在轉場效果的 0% 點替換。

請使用下列其中一種方式,為 display: nonevisibility: 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 功能,流暢進入及離開動畫」。如要進一步瞭解這些功能,請參閱以下說明文件資源: