CSS 筆記：如何實現 display none 的漸變效果

2024-06-15 07:42 CSS

懶人包

要讓元件在 display: none 變成其他 display 狀態時表現漸變（transition）效果的話，需要以下兩種設定：

  1. 設定目標元件的 @starting-style
  2. 將 transition-behavior 設定為 allow-discrete
div {
  flex: 1;
  border: 1px solid #333;
  position: relative;
  background: linear-gradient(
    to right,
    rgb(255 255 255 / 0%),
    rgb(255 255 255 / 50%)
  );
  opacity: 1;
  scale: 1 1;
  transition: all 0.4s allow-discrete; /* <== here */

  /* and here */
  @starting-style { 
    opacity: 0;
    scale: 1 0;
  }
}

備註：上方的可操作範例（改編自 MDN: Transitioning elements on DOM addition and removal）。

另外要注意 Firefox 尚未支援這兩個 CSS 參數。

而以下是關於 @starting-style 與 allow-discrete 的自用筆記，記錄了我認為這兩種 CSS 樣式需要注意的部分。若要了解詳細資訊，請務必回頭參考 MDN 中的說明。

@starting-style

重點：用於定義一個元件「從有到無，或是從無到有時」的樣式。

@starting-style is especially useful when creating entry and exit transitions for… elements that are changing to and from display: none, and elements when first added to or removed from the DOM.

在過去，當元件從 display: none 變成其他 display 狀態（或是反過來，從其他狀態變回 none）時，工程師無法對這段「變化」加上漸變效果。不會漸變是因為 display 的動畫屬性（animation type）是離散（discrete）的，代表它在表現動畫時，只會有「開始」與「結束」這兩種視覺效果。

但現在可以透過 @starting-style 與 transition-behavior: allow-discrete 讓 display 這個屬性也能實現漸變。

注意事項：

語法：有兩種寫法。一是把 @starting-style 包在樣式中：

#target {
  background-color: green;
  transition: background-color 1.5s;

  @starting-style {
    background-color: transparent;
  }
}

二是將 @starting-style 獨立出來，並在此區塊指定特定元件「開始時的樣式」：

#target {
  background-color: green;
  transition: background-color 1.5s;
}

@starting-style {
  #target {
    background-color: transparent;
  }
}

transition-behavior: allow-discrete

重點：允許離散（discrete）類型的動畫也能表現出漸變效果。

The transition-behavior CSS property specifies whether transitions will be started for properties whose animation behavior is discrete.

注意事項（摘錄自 Discrete animation behavior）：

參考文件