CSS: transition

.instui-transition.-transition-fade-entering — Các lớp trạng thái hoạt ảnh cho thành phần Transition — .instui-transition và các lớp trạng thái (-transition-fade-entering, -transition-scale-exited, v.v.) — có thể dùng rời hoặc ghép chuỗi lên bất kỳ thành phần nào.

Source: transition.css

Sử dụng

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

Các ví dụ

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

Bộ sửa

Bộ sửa	Mô tả
.-transition-*	Loại chuyển tiếp/lớp trạng thái được runtime bật/tắt (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	—

Thuộc tính tuỳ chỉnh

Thuộc tính	Kiểu	Mặc định	Mô tả
--duration	<time>	300ms	Thời lượng hoạt ảnh (mặc định 300ms); ghi đè để tăng tốc hoặc làm chậm mọi trạng thái chuyển tiếp.
--timing	*	ease-in-out	Hàm thời gian hoạt ảnh (mặc định ease-in-out).