המעברים בין תצוגות הם מונפשים ועוברים בצורה חלקה בין מצבים שונים בדף אינטרנט או בממשק המשתמש של אפליקציה. תכננו את View Transition API כדי לאפשר לכם ליצור את האפקטים האלה באופן פשוט ויעיל יותר מכפי שאפשר היה בעבר. ל-API יש מספר יתרונות לעומת גישות JavaScript קודמות, כולל:
- חוויית משתמש משופרת: מעברים חלקים ורמזים ויזואליים מנחים את המשתמשים לבצע שינויים בממשק המשתמש, וכך הופכים את הניווט לטבעי ופחות מרתיע.
- המשכיות חזותית: שמירה על המשכיות בין התצוגות מפחיתה את העומס הקוגניטיבי של המשתמשים ועוזרת למשתמשים להישאר ממוקדים באפליקציה.
- ביצועים: ה-API מנסה להשתמש בכמה שיותר משאבי ה-thread הראשי, וכך נוצרות אנימציות חלקות יותר.
- אסתטיקה מודרנית: המעברים המשופרים תורמים לחוויית משתמש מטופחת ומעניינת.
פוסט זה הוא חלק מסדרה בנושא האופן שבו חברות מסחר אלקטרוני שיפרו את האתר שלהן באמצעות תכונות חדשות של CSS ושל ממשק המשתמש. במאמר הזה תוכלו לקרוא איך חברות מסוימות הטמיעו את View Transition API ונהנו ממנו.
redBus
RedBus ניסתה תמיד ליצור התאמה בין חוויית המשתמש המקומית לבין חוויית האינטרנט. לפני השימוש ב-View Transition API, ההטמעה של האנימציות האלה בנכסי האינטרנט שלנו הייתה מאתגרת. אבל עם ממשק ה-API, גילינו שזה לא אינטואיטיבי ליצור מעברים בין התהליכים שעוברים המשתמשים השונים כדי שחוויית השימוש באינטרנט תהיה דומה יותר לאפליקציה. יחד עם יתרונות הביצועים, המאפיין הזה הוא תכונה שחובה להכיר בכל האתרים - Amit Komar, מנהל הנדסה בכיר, RedBus.
הצוות הטמיע מעברים בין תצוגות בכמה מקומות. לפניכם דוגמה לשילוב של עמעום הדרגתי ושקף באנימציה בסמל ההתחברות בדף הבית.
קוד
יישום זה משתמש במספר view-transition-name
אנימציות ובאנימציות מותאמות אישית (scale-down
ו-scale-up
). השימוש ב-view-transition-name
עם ערך ייחודי מפריד בין רכיב הכניסה לשאר הדף כדי להוסיף לו אנימציה בנפרד. כשיוצרים view-transition-name
ייחודי חדש, נוצר גם ::view-transition-group
חדש בעץ הרכיב המדומה (מוצג בקוד הבא), וכך אפשר לשנות אותו בנפרד מברירת המחדל ::view-transition-group(root)
.
::view-transition
├─::view-transition-group(root)
│ └─…
├─::view-transition-group(signin)
│ └─…
└─::view-transition-group(signinclose)
└─…
//Code for VT for login
if (!document.startViewTransition) {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
} else {
const transition = document.startViewTransition();
transition.ready.finally(() => {
setTimeout(() => {
this.setState(
{
closeSigninModal: condition ? true : false
},
() => {
if (closeSigninCb) {
closeSigninCb();
}
}
);
}, 500);
});
}
.signin_open {
view-transition-name: signin;
}
.signin_close {
view-transition-name: signinclose;
}
::view-transition-group(signin),
::view-transition-group(signinclose) {
animation-duration: 0.5s;
}
::view-transition-old(signin) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
::view-transition-new(signin) {
animation-name: -ua-view-transition-fade-in, scale-up;
}
::view-transition-new(signinclose) {
animation-name: -ua-view-transition-fade-out, scale-down;
}
@keyframes scale-down {
to {
scale: 0;
}
}
@keyframes scale-up {
from {
scale: 0;
}
}
טוקופדיה
הצוות השתמש במעברי תצוגה כדי להוסיף אנימציה הדרגתית כשהמשתמש עובר בין התמונות הממוזערות של המוצר.
ההטמעה כל כך קלה, ובעזרת
startViewTransition
מקבלים מיד מעבר עמעום נעים יותר בהשוואה להטמעה הקודמת, ללא אפקטים – אנדי ויהאלים, מהנדס תוכנה בכיר, Tokopedia.
לפני
אחרי
קוד
הקוד הבא משתמש ב-framework של React וכולל קוד ספציפי ל-framework, כמו flushSync.
מידע נוסף על עבודה עם frameworks כדי להטמיע מעברים בין תצוגות.
זוהי הטמעה בסיסית שבודקת אם הדפדפן תומך ב-startViewTransition
ואם כן, מבצע את המעבר. אחרת, הוא יחזור להתנהגות ברירת המחדל.
const handleClick =
({ url, index }) =>
() => {
if ('startViewTransition' in document) { //check if browser supports VT
document.startViewTransition(() => {
flushSync(() => {
setDisplayImage({ url, index });
setActiveImageIndex(index);
});
});
} else { //if VT is not supported, fall back to default behavior
setDisplayImage({ url, index });
setActiveImageIndex(index);
}
};
...
<Thumbnail onClick={handleClick({url, index})} />
בזאר המדיניות
בתחום ההשקעה של Policybazaar נעשה שימוש ב-View Transition API באלמנטים של טיפים לעזרה כמו "למה כדאי לקנות", וכך לשפר את הניראות שלהם ולשפר את השימוש בתכונות כאלה.
ששילבנו את מעברי View throughs (מעברי תצוגה), וביטלנו את ה-CSS וקוד ה-JavaScript שחוזרים על עצמם כדי לנהל אנימציות במדינות שונות. כך חסכו במאמצי הפיתוח ושיפרו משמעותית את חוויית המשתמש – Aman Soni, Tech Lead, Policybazaar.
קוד
הקוד הבא דומה לדוגמאות הקודמות. חשוב לציין דבר אחד שהוא היכולת לשנות את הסגנונות והאנימציות שמוגדרים כברירת מחדל ב-::view-transition-old(root)
וב-::view-transition-new(root)
. במקרה הזה, ערך ברירת המחדל של animation-duration
עודכן ל-0.4 שניות.
togglePBAdvantagePopup(state: boolean) {
this.showPBAdvantagePopup = state;
if(!document.startViewTransition) {
changeState();
return;
}
document.startViewTransition(() => {changeState();});
function changeState() {
document.querySelector('.block_section').classList.toggle('hide');
document.querySelector('.righttoggle_box').classList.toggle('show');
}
}
.righttoggle_box{
view-transition-name: advantage-transition;
}
.block_section{
view-transition-name: advantage-transition;
}
::view-transition-old(root), ::view-transition-new(root) {
animation-duration: 0.4s;
}
דברים שכדאי לקחת בחשבון כשמשתמשים ב-View Transition API
כשמשתמשים בכמה אפקטים של מעבר בין תצוגות באותו הדף, חשוב לוודא שיש שם שונה למעבר תצוגה לכל אפקט או קטע כדי למנוע התנגשויות.
בזמן שהמעבר בין תצוגות פעיל (מעבר), הוא יוסיף שכבה חדשה מעל לשאר ממשק המשתמש. לכן, לא כדאי להפעיל את המעבר בזמן העברת העכבר, כי האירוע mouseLeave
יופעל באופן בלתי צפוי (כשהסמן בפועל עדיין לא זז).
מקורות מידע
- מעברים חלקים ופשוטים באמצעות View Transition API
- הסבר: הצגת המעברים של MPA
- מקרה לדוגמה: מעבר חלק בעזרת תצוגה של מעברים
- מקרה לדוגמה: האינטרנט יכול לעשות מה!? | שליחת ניווטים דמויי אפליקציה
- הצעה הדדית: הגדרת מעברי תצוגה זמינים בכל הדפדפנים
- רוצה לדווח על באג או לבקש תכונה חדשה? נשמח לקבל מכם משוב לגבי SPA ו-MPA.
כדאי לקרוא את המאמרים הנוספים בסדרה הזו שמראים איך חברות למסחר אלקטרוני הפיקו תועלת מהשימוש בתכונות חדשות של CSS ושל ממשק המשתמש כמו אנימציות מבוססות-גלילה, חלון קופץ, שאילתות קונטיינרים והבורר has()
.