הצגת מקרים לדוגמה של מעברים

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

תמיכה בדפדפן

• 111
• 111
• X
• 18

מקור

הערה: Chrome השיקה תמיכה ב-View Transition API לאפליקציות בדף יחיד (SPA) בזמן תמיכה במספר אפליקציות בדפים (MPA) זמינה דגל chrome://flags/#view-transition-on-navigation בזמן הכתיבה. מידע נוסף על View Transit API

הפוסט הזה חלק מסדרה דיון באופן שבו חברות מסחר אלקטרוני שיפרו את האתר שלהם באמצעות תכונות חדשות של CSS וממשק משתמש. במאמר הזה נסביר על האופן שבו חברות מסוימות הטמיעו את ממשק View Transition API ונהנים ממנו.

redBus

RedBus ניסתה תמיד ליצור התאמה רבה ככל האפשר בין האתרים המקוריים שלהם ככל האפשר. לפני ה-View Transit API, הטמעת אותם היה מאתגר. אבל בעזרת ה-API, מצאנו כדי ליצור מעברים בין התהליכים שעוברים המשתמשים באופן אינטואיטיבי כדי להפוך את לחוויית שימוש דומה יותר באפליקציה. יחד עם יתרונות הביצועים, חייבת להיות לה תכונה לכל האתרים.— קומאר, בכיר בהנדסה מנהל, RedBus.

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

עמעום והסטה בתצוגה של מעברים בתצוגה כאשר המשתמש לוחץ על פרטי ההתחברות בדף הבית של 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;
 }
}

Tokopedia

הצוות השתמש במעברים בין תצוגות כדי להוסיף אנימציה הדרגתית כשהמשתמש החליף בין התמונות הממוזערות של המוצרים.

ההטמעה כל כך פשוטה, באמצעות startViewTransition מיד תהליך עמעום נעים יותר בהשוואה להטמעה הקודמת ללא השפעות — אנדי Wihalim, תוכנה בכירה מהנדסים, Tokopedia.

לפני

אחרי

קוד

הקוד הבא משתמש ב-framework של React וכולל קוד ספציפי ל-framework, כמו flushSync.למידע נוסף על עבודה עם מסגרות להטמעת תצוגות מעברים בין פגישות. זוהי הטמעה בסיסית שבודקת אם הדפדפן תומך 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 ברכיבי טיפים לעזרה כמו "למה כדאי לקנות", להפוך אותן למושכות מבחינה ויזואלית ולשפר את השימוש בתכונות כאלה.

באמצעות השילוב של מעברי תצוגה, אין יותר CSS ו-JavaScript שחוזרים על עצמם שאחראי על ניהול אנימציות במצבים שונים. הפריט נשמר ולשפר משמעותית את חוויית המשתמש.—אמן Soni, Tech Lead, Policybazaar.

צפייה באנימציה של מעברים בקטע 'למה כדאי לקנות מ-Policybazaar' CTA בדף של רישום השקעות.

קוד

הקוד הבא דומה לדוגמאות הקודמות. חשוב לציין יכולת לעקוף את הסגנונות והאנימציות המוגדרים כברירת מחדל ::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().

• למה היכולות של ממשק המשתמש באינטרנט חשובות לאתר המסחר האלקטרוני?
• מקרים לדוגמה של אנימציות מבוססות גלילה
• מקרים לדוגמה של Popover API
• מקרים לדוגמה של שאילתות קונטיינר
• מקרים לדוגמה של בורר:has()