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

מדריך זה מדגים כיצד ליישם מעברים ואנימציות ב-Vue.js. תלמד כיצד ליצור מעברים פשוטים וגם אנימציות מורכבות באמצעות ה מַעֲבָר מסגרות מפתח של רכיבים ו-CSS.

רכיב המעבר של Vue.js

ל-Vue.js יש מובנה מַעֲבָר רכיב המאפשר לך ליצור אנימציות באפליקציה שלך. רכיב זה עוטף את אלמנט היעד שאנו רוצים להנפיש.

כאן רכיב המעבר עוטף את הכותרת ברמה אחת:

 שלום </h1>
</transition>

כאשר אתה עוטף אלמנט עם ה מַעֲבָר רכיב, הרכיב יחיל מחלקות מעבר על האלמנט שהוא עוטף. ישנם שישה כיתות מעבר בסך הכל. שלושה שולטים בהנפשה של האלמנט בזמן שהוא נכנס לדף. שלושת האחרים שולטים בהנפשה של האלמנט כשהיא עוזבת את הדף.

הקוד המשמש במאמר זה זמין כאן מאגר GitHub והוא בחינם עבורך לשימוש תחת רישיון MIT.

החלת מחלקות מעבר כאשר אלמנטים נכנסים לדף

במהלך תהליך הכניסה של האלמנט ל-DOM, ה-

מַעֲבָר הרכיב מיישם את המחלקות להיכנס-מ, להיכנס ל, ו enter-active אליו. מחלקות אלו מאפשרות לך לשלוט כיצד האלמנט ייצור הנפשה או העברה אל הדף.

• להיכנס-מ: מוחל על האלמנט לפני שהוא נכנס לדפדפן. אתה משתמש במחלקה זו כדי להגדיר את מצב ה-CSS הראשוני של האלמנט.
• להיכנס ל: מוחל על האלמנט כשהוא נכנס לדפדפן. אתה משתמש במחלקה זו כדי להגדיר את מצב ה-CSS הסופי של האלמנט.
• enter-active: מוחל בזמן שהאלמנט עובר ממצב אחד לאחר. כאן אתה מכתיב כמה זמן ייקח המעבר.

בוא נראה דוגמה:

<מַעֲבָר>
 <h1> שלוםh1>
מַעֲבָר>
.enter-from {
אֲטִימוּת: 0;
}
.enter-to {
אֲטִימוּת: 1;
}
.enter-active {
מַעֲבָר: אֲטִימוּת 2סקַלוּת;
}

עם הקוד הזה, לכותרת ברמה אחת לוקח שתי שניות לעבור מבלתי נראה (אטימות: 0) לגלוי לחלוטין (אטימות: 1). המעבר הזה מתרחש כאשר האלמנט נכנס ל-DOM. ללא המעבר, הטקסט היה מופיע מיד בדפדפן ברגע שהדף נטען.

החלת כיתות מעבר כאשר אלמנטים עוזבים את הדף

ה מַעֲבָר רכיב תומך בשלוש מחלקות מעבר אחרות שאתה צריך ליישם כאשר האלמנט עוזב את ה-DOM. השמות שלהם הם עזיבה-מ, לעזוב ל, ו לעזוב-פעיל. מחלקות אלה שולטים כיצד האלמנט ייצור הנפשה או העברה מהדף.

כפי שאולי ניחשתם, שיעורים אלה דומים ל- להיכנס- שיעורים שדיברנו עליהם קודם לכן. אבל מחלקות אלה מופעלות רק כאשר האלמנט עומד להתנתק מה-DOM. הרכבה ופירוק הם מושגים חשובים של ה-DOM. בתור מפתח, אתה צריך להיות א הבנה בסיסית של ה-DOM ומושגים קשורים אחרים.

בוא נראה דוגמה:

<מַעֲבָר>
 <h1> שלוםh1>
מַעֲבָר>
.עזוב-מ {
אֲטִימוּת: 0;
}
.לעזוב ל {
אֲטִימוּת: 1;
}
.leave-active {
מַעֲבָר: אֲטִימוּת 2סקַלוּת;
}

במקרה זה, לכותרת ברמה אחת לוקח שתי שניות לעבור באיטיות מ-(אטימות: 1) לבלתי נראה (אטימות: 0). המעבר הזה מתרחש כאשר האלמנט עוזב את ה-DOM. ללא המעבר, הטקסט היה נעלם מהדפדפן באופן מיידי.

שימוש בשמות מעבר

אתה יכול גם להוסיף א שֵׁם לייחס לרכיב המעבר שלך. כאשר תעשה זאת, Vue תוסיף את השם לשיעורי המעבר שלך. משמעות הדבר היא שאתה יכול להיות מספר מעברים בדף שלך, כל אחד עם מחלקות מעבר ייחודיות ומאפייני CSS.

לדוגמה, אם אתה מגדיר את השם לִדעוֹך ברכיב המעבר שלך, אז כל מחלקות המעבר יקדמו עם לִדעוֹך:

<מַעֲבָרשֵׁם ="לִדעוֹך">
 <h1> שלוםh1>
מַעֲבָר>
.fade-enter-from {
אֲטִימוּת: 1;
}
.fade-leave-from {
אֲטִימוּת: 1;
}
// אַחֵר "להיכנס" ו "לעזוב" שיעוריםעםהלִדעוֹךכפי שקידומת

יצירת מעברים באמצעות רכיב המעבר

כדי להדגים את המעבר ב-Vue.js, תעטוף א H1 בתוך ה מַעֲבָר רְכִיב. מתחת, תיצור כפתור. כאשר לוחצים על כפתור זה, הוא מחליף את המשתנה הראה כותרת בֵּין שֶׁקֶר ו נָכוֹן.

הנה הקוד:

לאחר מכן, הגדר את ה תַסרִיט סָעִיף. סעיף זה מכיל את להכין שיטה שבה אתה מאתחל את הראה כותרת משתנה עם שֶׁקֶר.