transition-behavior
Baseline 2024 *
新推出
語法
/* Keyword values */
transition-behavior: allow-discrete;
transition-behavior: normal;
/* Global values */
transition-behavior: inherit;
transition-behavior: initial;
transition-behavior: revert;
transition-behavior: revert-layer;
transition-behavior: unset;
值
allow-discrete-
元素的離散動畫屬性將啟動過渡。
normal-
元素的離散動畫屬性將不啟動過渡。
描述
transition-behavior 屬性僅在與其他過渡屬性（特別是 transition-property 和 transition-duration）結合使用時才相關，因為如果沒有任何屬性在非零時間內進行動畫，則不會發生過渡。
.card {
transition-property: opacity, display;
transition-duration: 0.25s;
transition-behavior: allow-discrete;
}
.card.fade-out {
opacity: 0;
display: none;
}
transition-behavior 值可以作為縮寫 transition 宣告的一部分。當包含在縮寫中，並且使用或預設所有屬性時，allow-discrete 值對常規可動畫屬性沒有影響。以下 CSS 等同於上述長手宣告
.card {
transition: all 0.25s;
transition: all 0.25s allow-discrete;
}
.card.fade-out {
opacity: 0;
display: none;
}
在上面的程式碼片段中，我們兩次包含了 transition 屬性。第一個例項不包含 allow-discrete 值——這提供了跨瀏覽器支援，確保卡片的其他屬性在不支援 transition-behavior 的瀏覽器中仍然進行過渡。
離散動畫行為
離散動畫屬性通常在兩個值之間動畫的 50% 處翻轉。
但是有一個例外，那就是當動畫到或從 display: none 或 content-visibility: hidden 時。在這種情況下，瀏覽器將在兩個值之間翻轉，以便過渡內容在整個動畫持續時間內顯示。
所以例如：
- 當
display從none動畫到block（或其他可見的display值）時，該值將在動畫持續時間的0%處切換到block，使其在整個過程中可見。 - 當
display從block（或其他可見的display值）動畫到none時，該值將在動畫持續時間的100%處切換到none，使其在整個過程中可見。
正式定義
正式語法
transition-behavior =
<transition-behavior-value>#
<transition-behavior-value> =
normal |
allow-discrete
示例
過渡彈窗
在此示例中，當 彈出視窗 從隱藏到顯示再返回時，它會進行動畫 過渡。
HTML
HTML 包含一個使用 popover 屬性宣告為彈出視窗的 <div> 元素，以及一個使用其 popovertarget 屬性指定為彈出視窗顯示控制的 <button> 元素。
<button popovertarget="mypopover">Show the popover</button>
<div popover="auto" id="mypopover">I'm a Popover! I should animate.</div>
CSS
[popover]:popover-open {
opacity: 1;
transform: scaleX(1);
}
[popover] {
/* Final state of the exit animation */
opacity: 0;
transform: scaleX(0);
transition-property: opacity, transform, overlay, display;
transition-duration: 0.7s;
transition-behavior: allow-discrete;
/* Using the shorthand transition property, we could write:
transition:
opacity 0.7s,
transform 0.7s,
overlay 0.7s allow-discrete,
display 0.7s allow-discrete;
or even:
transition: all 0.7s allow-discrete;
*/
}
/* Needs to be included after the previous [popover]:popover-open
rule to take effect, as the specificity is the same */
@starting-style {
[popover]:popover-open {
opacity: 0;
transform: scaleX(0);
}
}
我們想要動畫的兩個屬性是 opacity 和 transform：我們希望彈出視窗在水平方向上放大和縮小時淡入淡出。我們在彈出視窗元素的預設隱藏狀態（透過 [popover] 選擇）上設定這些屬性的起始狀態，並在彈出視窗的開啟狀態（透過 :popover-open 偽類選擇）上設定結束狀態。然後我們設定 transition 屬性以在兩者之間進行動畫。
由於動畫元素在顯示時被提升到頂層，在隱藏時從頂層移除——這也意味著其隱藏狀態設定了 display: none——因此將以下屬性新增到過渡元素列表中，以使動畫在兩個方向上都起作用。在這兩種情況下，transition-behavior: allow-discrete 在簡寫中設定以啟用離散動畫。
display：必需，以便動畫元素在進入和退出動畫期間都可見（設定為display: block）。沒有它，退出動畫將不可見；實際上，彈出視窗將直接消失。overlay：必需，以確保在動畫完成後才延遲從頂層移除元素。這對於像這樣簡單的動畫沒有太大區別，但在更復雜的情況下，不這樣做可能會導致元素過快地從疊加層中移除，這意味著動畫不流暢或無效。
此外，動畫的起始狀態在 @starting-style at-rule 中設定。這是為了避免意外行為。預設情況下，過渡不會在元素的首次樣式更新時觸發，也不會在 display 型別從 none 更改為其他型別時觸發。@starting-style 允許您以特定的受控方式覆蓋該預設行為。沒有它，進入動畫將不會發生，彈出視窗將直接出現。
結果
程式碼渲染如下：
備註： 因為 popover 每次顯示時都會從 display: none 變為 display: block，所以每次進入過渡發生時，popover 都會從其 @starting-style 樣式過渡到其 [popover]:popover-open 樣式。當 popover 關閉時，它會從其 [popover]:popover-open 狀態過渡到預設的 [popover] 狀態。
在這種情況下，進入和退出時的樣式過渡可能會有所不同。請參閱我們的何時使用起始樣式的演示示例以證明這一點。
規範
| 規範 |
|---|
| CSS Transitions Level 2 # transition-behavior 屬性 |
瀏覽器相容性
載入中…
另見
overlay@starting-style- CSS 過渡模組
- 用於平滑進入和退出動畫的四個新 CSS 功能，來自 developer.chrome.com (2023)