מעברי תצוגה הם מעברים מונפשים וחלקים בין מצבים שונים של דף אינטרנט או של ממשק המשתמש של אפליקציה. View Transition API נועד לאפשר לכם ליצור את האפקטים האלה בצורה פשוטה ויעילה יותר ממה שהיה אפשרי בעבר. ל-API יש כמה יתרונות בהשוואה לגישות קודמות של JavaScript, כולל:
- חוויית משתמש משופרת: מעברים חלקים ורמזים חזותיים עוזרים למשתמשים להבין את השינויים בממשק המשתמש, כך שהניווט מרגיש טבעי יותר ופחות מטלטל.
- המשכיות חזותית: שמירה על תחושת המשכיות בין התצוגות מפחיתה את העומס הקוגניטיבי ועוזרת למשתמשים להתמצא באפליקציה.
- ביצועים: ה-API מנסה להשתמש בכמה שפחות משאבים של ה-thread הראשי, וכך ליצור אנימציות חלקות יותר.
- מראה מודרני: המעברים המשופרים תורמים לחוויית משתמש מושכת ומלוטשת.
הפוסט הזה הוא חלק מסדרה שבה אנחנו מסבירים איך חברות מסחר אלקטרוני שיפרו את האתר שלהן באמצעות תכונות חדשות של CSS וממשק משתמש. במאמר הזה נסביר איך חברות מסוימות הטמיעו את View Transition API ואיך הן נהנו מהיתרונות שלו.
redBus
ב-redBus תמיד ניסו ליצור כמה שיותר שוויון בין חוויית השימוש באפליקציה לבין חוויית השימוש באתר. לפני שהשקנו את View Transition API, היה לנו קשה להטמיע את האנימציות האלה בנכסי האינטרנט שלנו. אבל בעזרת ה-API, קל ליצור מעברים בין כמה תהליכים שעוברים המשתמשים כדי שהחוויה באתר תהיה דומה יותר לחוויה באפליקציה. כל זה, יחד עם שיפור הביצועים, הופך את התכונה הזו לחובה בכל אתר.—אמיט קומאר, מנהל בכיר בתחום ההנדסה, redBus.
הצוות הטמיע מעברים בין תצוגות בכמה מקומות. דוגמה לשילוב של אנימציית הופעה הדרגתית ואנימציית החלקה בסמל הכניסה בדף הבית.
קוד
בהטמעה הזו נעשה שימוש בכמה אנימציות מותאמות אישית (scale-downוscale-up). השימוש ב-view-transition-nameעם ערך ייחודי מפריד את רכיב הכניסה משאר הדף כדי להנפיש אותו בנפרד.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;
}
}
Tokopedia
הצוות השתמש במעברים בין תצוגות כדי להוסיף אנימציית דהייה כשמשתמשים עוברים בין תמונות ממוזערות של מוצרים.
ההטמעה כל כך פשוטה, שבאמצעות
startViewTransitionאנחנו מקבלים מיד מעבר הדרגתי נעים יותר בהשוואה להטמעה הקודמת ללא אפקטים – אנדי ויהאלים (Andy Wihalim), מהנדס תוכנה בכיר, Tokopedia.
לפני
אחרי
קוד
הקוד הבא משתמש ב-React framework וכולל קוד ספציפי ל-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
ב-Policybazaar, צוות ההשקעות השתמש ב-View Transition API ברכיבי טיפים כמו 'למה כדאי לקנות', כדי לשפר את המראה שלהם ואת השימוש בתכונות האלה.
הטמענו את View Transitions כדי לבטל קוד CSS ו-JavaScript חוזר שאחראי על ניהול אנימציות במצבים שונים. הפתרון הזה חסך לנו מאמצי פיתוח ושיפר משמעותית את חוויית המשתמשים.—אמן סוני (Aman Soni), מוביל טכנולוגי, 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
- מקרה לדוגמה: ניווט חלק באמצעות View Transitions
- מקרה לדוגמה: מה אפשר לעשות באינטרנט? | לספק ניווט כמו באפליקציה
- הצעה לאינטראופרביליות: הוספת אפשרות להעברת תצוגות בדפדפנים
- רוצה לדווח על באג או לבקש תכונה חדשה? אנחנו רוצים לשמוע מכם לגבי SPA ו-MPA.
מומלץ לעיין במאמרים האחרים בסדרה הזו, שבהם מוסבר איך חברות מסחר אלקטרוני נהנו משימוש בתכונות חדשות של CSS וממשק משתמש, כמו אנימציות מבוססות גלילה, חלונות קופצים, שאילתות של קונטיינרים והסלקטור has().