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">เนื้อหาเคลื่อนไหว</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).