CSS: transition

.instui-transition.-transition-fade-entering — Transition bileşeni için animasyon durum sınıfları — .instui-transition ve durum sınıfları (-transition-fade-entering, -transition-scale-exited, vb.) — tek başına veya herhangi bir bileşene zincirlenmiş şekilde kullanılabilir.

Source: transition.css

Kullanım

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

Örnekler

<div class="instui-transition -transition-fade-entering">Animasyonlu içerik</div>

Değiştiriciler

Değiştirici	Açıklama
.-transition-*	Çalışma zamanında (fade|scale|slide-* + entering|entered|exiting|exited) tarafından açılıp kapatılan geçiş türü/durum sınıfı.
.-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	—

Özel özellikler

Özellik	Tür	Varsayılan	Açıklama
--duration	<time>	300ms	Animasyon süresi (varsayılan 300ms); her geçiş durumunun hızını artırmak veya yavaşlatmak için geçersiz kılın.
--timing	*	ease-in-out	Animasyon zamanlama fonksiyonu (varsayılan ease-in-out).