חשיפה בתור

כשבלוק נכנס למסך, חלקיו מתחדדים מתוך טשטוש אחד אחרי השני. מתאים לצירי זמן, רשימות שלבים וכותרות.

התאמה

delayStep0.25sduration0.5sblur20pxoffsetY0px

color

accentColor

highlightColor

מבוסס על Timeline Animation (MIT רישיון) · תנאי שימוש

14 מאפיינים

מאפיין	סוג	ברירת מחדל	תיאור
children	ReactNode	—	מה לחשוף.
animationNum	number	—	המקום בתור. פריט N מופיע N צעדים אחרי ההתחלה.
timelineRef	RefObject<HTMLElement \| null>	—	הבלוק המשותף. כשהוא נכנס למסך, כל השרשרת מתחילה.
as	keyof HTMLElementTagNameMap	`"div"`	תגית HTML שתוצג.
once	boolean	`true`	לנגן רק בפעם הראשונה. אחרת מסתתר ונחשף שוב בכל כניסה.
delayStep	number	`0.25`	הפסקה בין פריטים שכנים בשניות.
duration	number	`0.5`	כמה שניות פריט אחד מופיע.
blur	number	`20`	טשטוש של פריט מוסתר בפיקסלים.
offsetY	number	`0`	הזזה אנכית של פריט מוסתר בפיקסלים.
customVariants	Variants	—	מצבי hidden ו-visible משלך במקום הטשטוש.
color	string	`"#ffffff"`	הצבע הראשי. הילדים קוראים אותו דרך var(--timeline-c1).
accentColor	string	`"#a3a3a3"`	הצבע השני. הילדים קוראים אותו דרך var(--timeline-c2).
highlightColor	string	`"#ffffff"`	צבע הדגשה בהיר. הילדים קוראים אותו דרך var(--timeline-c3).
className	string	—	מחלקות נוספות.

1 חבילות נדרשות

npm install motion