CSS: transition

.instui-transition.-transition-fade-entering — 適用於 Transition 元件的動畫狀態類別 — .instui-transition 與狀態類別（-transition-fade-entering, -transition-scale-exited 等）— 可單獨使用或串接到任何元件上。

Source: transition.css

使用方法

@import "@pantoken/components/utilities.css";

範例

<div class="instui-transition -transition-fade-entering">Animated content</div>

修飾器

修飾器	說明
.-transition-*	由執行時切換的過渡類型/狀態類別（fade|scale|slide-* + entering|entered|exiting|exited）。
.-transition-fade-entered	—
.-transition-fade-entering	—
.-transition-fade-exited	—
.-transition-fade-exiting	—
.-transition-scale-entered	—
.-transition-scale-entering	—
.-transition-scale-exited	—
.-transition-scale-exiting	—
.-transition-slide-down-entered	—
.-transition-slide-down-entering	—
.-transition-slide-down-exited	—
.-transition-slide-down-exiting	—
.-transition-slide-left-entered	—
.-transition-slide-left-entering	—
.-transition-slide-left-exited	—
.-transition-slide-left-exiting	—
.-transition-slide-right-entered	—
.-transition-slide-right-entering	—
.-transition-slide-right-exited	—
.-transition-slide-right-exiting	—
.-transition-slide-up-entered	—
.-transition-slide-up-entering	—
.-transition-slide-up-exited	—
.-transition-slide-up-exiting	—

自訂屬性

屬性	型別	預設	說明
--duration	<time>	300ms	動畫持續時間（預設 300ms）；可覆寫以加速或減慢每個過渡狀態。
--timing	*	ease-in-out	動畫時序函數（預設 ease-in-out）。