CSS transition-behavior 怎麼用？用 allow-discrete 做 display 的進出場轉場

allow-discrete 先解決什麼問題#

transition-behavior 只有和其他 transition 設定一起使用才有作用，至少要有要轉場的屬性和非零 duration。最小的卡片範例如下：

1
.card {
2
  opacity: 1;
3
  display: block;
4
  transition-property: opacity, display;
5
  transition-duration: 0.25s;
6
  transition-behavior: allow-discrete;
7
}
8

9
.card.is-hidden {
10
  opacity: 0;
11
  display: none;
12
}

在支援 allow-discrete 的瀏覽器裡，卡片會先完成 opacity 的淡出，再切換成 display: none。進場時則會先變成可見，再開始 opacity 的轉場；離散值本身不是從 block 慢慢變成 none。

如果要用 shorthand，可以保留一條不含新值的 fallback，再覆蓋一條支援離散屬性的宣告：

1
.card {
2
  transition: opacity 0.25s ease;
3
  transition: opacity 0.25s ease, display 0.25s allow-discrete;
4
}

不支援第二條宣告的瀏覽器會保留第一條，至少仍能讓 opacity 轉場；支援的瀏覽器才會把 display 納入轉場。

離散屬性不是一般的漸變#

一般離散屬性通常會在轉場中間點切換，但 display: none 和 content-visibility: hidden 有特別處理，讓內容在整段動畫期間仍可見：

這也是為什麼只寫 opacity: 0 不夠：元素仍可能佔據版面、仍可能接收互動，或在隱藏後留下一個不可預期的焦點位置。把 visual transition 和 layout／accessibility 狀態一起設計，才是 allow-discrete 的實際用途。

用 @starting-style 做進場動畫#

元素第一次從 display: none 變成可見時，瀏覽器不一定會自動觸發你期待的 entry transition。@starting-style 可以明確告訴瀏覽器：進場前要從哪個狀態開始。

1
.panel {
2
  opacity: 0;
3
  display: none;
4
  transform: translateY(-0.5rem);
5
  transition:
6
    opacity 0.2s ease,
7
    transform 0.2s ease,
8
    display 0.2s allow-discrete;
9
}
10

11
.panel.is-open {
12
  opacity: 1;
13
  display: block;
14
  transform: translateY(0);
15
}
16

17
@starting-style {
18
  .panel.is-open {
19
    opacity: 0;
20
    transform: translateY(-0.5rem);
21
  }
22
}

@starting-style 只處理 entry 的起點，不會替你管理開關狀態。按鈕、JavaScript 或元件框架仍要正確切換 class；如果內容有表單或可聚焦控制項，也要在開啟與關閉時處理 focus。

Popover 進出場要加上 display 與 overlay#

原生 Popover API 已經負責顯示、關閉和 top layer；如果你要替 popover 加上進出場效果，還要把 display 和 overlay 一起列入 transition，避免元素太早被隱藏或移出 top layer。你可以先閱讀 HTML Popover API 的基本用法，再套用下面的樣式：

1
<button type="button" popovertarget="help-popover">顯示說明</button>
2
<div id="help-popover" popover="auto">這是一段可關閉的說明。</div>

1
#help-popover {
2
  opacity: 0;
3
  transform: scale(0.96);
4
  transition:
5
    opacity 0.2s ease,
6
    transform 0.2s ease,
7
    overlay 0.2s allow-discrete,
8
    display 0.2s allow-discrete;
9
}
10

11
#help-popover:popover-open {
12
  opacity: 1;
13
  transform: scale(1);
14
}
15

16
@starting-style {
17
  #help-popover:popover-open {
18
    opacity: 0;
19
    transform: scale(0.96);
20
  }
21
}

display 讓 popover 在淡出期間保持可見，overlay 則讓它留在 top layer 到轉場完成。這個例子是 progressive enhancement：不支援相關能力的瀏覽器仍應能開關 popover，但不一定有完整的動畫效果。

用 feature query 和 reduced motion 做退路#

如果你的瀏覽器支援矩陣包含較舊的裝置，可以把 enhancement 集中在 @supports，並對偏好減少動畫的使用者降低 duration：

1
.card {
2
  opacity: 1;
3
  display: block;
4
  transition: opacity 0.2s ease;
5
}
6

7
@supports (transition-behavior: allow-discrete) {
8
  .card {
9
    transition:
10
      opacity 0.2s ease,
11
      display 0.2s allow-discrete;
12
  }
13
}
14

15
@media (prefers-reduced-motion: reduce) {
16
  .card {
17
    transition-duration: 0.01ms;
18
  }
19
}

不要用 @supports 來隱藏整個內容；它只應控制轉場 enhancement。就算沒有離散轉場，開關功能和文字內容仍要可用。

上線前檢查這四件事#

1. 狀態：關閉後的元素是否真的從版面、互動與輔助技術的閱讀順序移除？
2. 焦點：關閉一個含有輸入框的 panel 或 popover 後，焦點是否回到觸發按鈕或合理的下一個控制項？
3. 支援：在目標瀏覽器測試 display、@starting-style、Popover top layer 和 overlay，不要只在最新桌面瀏覽器確認。
4. 偏好：開啟 prefers-reduced-motion 後，內容是否仍然能快速出現與消失，而不會讓使用者等待動畫。

常見錯誤是只加 transition-behavior: allow-discrete 卻沒有把 display 放進 transition-property，或沒有設定 duration。另一個錯誤是先用 JavaScript 設成 display: none，動畫根本沒有機會執行；狀態切換要交給 CSS 與元件生命週期協調。

結論：把顯示狀態和轉場一起設計#

allow-discrete 的價值不是讓離散屬性變成連續動畫，而是把「可見、可互動、從版面移除」這些狀態交給同一段轉場協調。一般卡片用 display 加 opacity，進場補上 @starting-style；Popover 則把 display、overlay 和 top layer 一起處理，再用 feature query 和 reduced motion 保留可用退路。

常見問題#