這篇文章介紹了 Chrome 剛才登陸的幾個實用功能,說明四項全新的進入和離開效果的 CSS 功能。現在,「@starting-style」和「transition-behavior: allow-discrete」這兩個功能,在 Firefox 129 推出後,已成為「 Baseline 新支援」!您現在可以為元素建立輸入動畫效果,包括以 display: none
為動畫呈現的元素,以及在頂層圖層中建立動畫效果。
使用 @starting-style
設定項目特效
@starting-style
規則可定義元素的初始樣式,然後才顯示在網頁上。對於從 display: none
加入動畫的元素,此為必要項目,因為元素需要有動畫效果的狀態。
如同在 CSS 中的任何其他規則,使用 @starting-style
加入元素的樣式。舉例來說,如果使用 <dialog>
,請將 dialog[open]
樣式放在 @starting-style
規則中。這些是對話方塊開啟前所使用的樣式。
@starting-style {
dialog[open] {
/* Styles before the dialog opens */
}
}
使用 allow-discrete
啟用離散動畫
此外,如要支援從 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 巢狀結構也是最新的基準功能。
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 功能,流暢進入及離開動畫」。如要進一步瞭解這些功能,請參閱以下說明文件資源: