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-*	Փոխանցման տիպ/վիճակի դաս, որին runtime-ը անցում է կատարում (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).