CSS: transition ​

.instui-transition.-transition-fade-entering — کلاس‌های وضعیت انیمیشن برای مؤلفه Transition — .instui-transition و کلاس‌های وضعیت (-transition-fade-entering, -transition-scale-exited, و غیره) — قابل استفاده به‌صورت تنها یا الحاق‌شده به هر مؤلفه.

Source: transition.css

نحوه استفاده ​

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

نمونه‌ها ​

html
<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).