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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

redBus

ב-redBus תמיד ניסו ליצור כמה שיותר שוויון בין חוויית השימוש באפליקציה לבין חוויית השימוש באתר. לפני השימוש View Transition API, ההטמעה של האנימציות האלה בנכסי האינטרנט שלנו הייתה מאתגרת. עם זאת, באמצעות ה-API, גילינו שקל ליצור מעברים בין כמה תהליכים שעוברים המשתמשים כדי לשפר את חוויית השימוש באתר ולהפוך אותה ליותר דומה לאפליקציה. כל זה, בשילוב עם יתרונות הביצועים, הופכים את התכונה הזו לחובה בכל האתרים. – Amit Kumar, מנהל תוכנה בכיר, 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 מקבלים מיד מעבר עמעום נעים יותר בהשוואה להטמעה הקודמת, ללא אפקטים – אנדי ויהאלים, מהנדס תוכנה בכיר, 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

בתחום ההשקעה של Policybazaar נעשה שימוש ב-View Transit API באלמנטים של טיפים לעזרה כמו "למה כדאי לקנות", וכך לשפר את הניראות שלהם ולשפר את השימוש בתכונות כאלה.

בעזרת שילוב של מעבר תצוגות, הסרנו קוד 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

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

כשמעבר תצוגה פעיל (במהלך המעבר), הוא מוסיף שכבה חדשה מעל שאר רכיבי ממשק המשתמש. לכן, לא כדאי להפעיל את המעבר בזמן העברת העכבר, כי האירוע mouseLeave יופעל באופן בלתי צפוי (כשהסמן בפועל עדיין לא זז).

משאבים

• מעבר חלק ופשוט באמצעות View Transition API
• הסבר: הצגת מעברים ב-MPA
• מקרה לדוגמה: ניווט חלק בעזרת מעבר בין תצוגות
• מקרה לדוגמה: האינטרנט יכול לעשות מה!? | שליחת ניווטים דמויי אפליקציה
• הצעה לשיתוף פעולה: הפיכת מעברים בין תצוגות לזמינים בדפדפנים שונים
• רוצה לדווח על באג או לבקש תכונה חדשה? אנחנו רוצים לשמוע ממך לגבי SPA ואתרי שותפים דיגיטליים.

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

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