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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

תמיכה בדפדפנים

• 111
• 111
• x
• 18

מקור

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

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

redBus

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

לפני

אחרי

קוד

הקוד הבא משתמש במסגרת React וכולל קוד ספציפי למסגרת, כמו 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

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

בעזרת שילוב של מעבר תצוגות, הסרנו קוד CSS ו-JavaScript חוזר על עצמו שאחראי לניהול אנימציות במצבים שונים. כך הצלחנו לחסוך מאמצים בפיתוח ולשפר באופן משמעותי את חוויית המשתמש. – Aman סוני, מנהל טכני, Policybazaar.

אנימציית מעברים בקריאה לפעולה 'למה כדאי לקנות מ-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
• מקרה לדוגמה: ניווט חלק בעזרת מעבר בין תצוגות
• מקרה לדוגמה: מה האינטרנט יכול לעשות? | הצגת ניווטים שדומים לאפליקציות
• הצעה לשיתוף פעולה: הפיכת מעברים בין תצוגות לזמינים בדפדפנים שונים
• רוצה לדווח על באג או לבקש תכונה חדשה? אנחנו רוצים לשמוע ממך לגבי אתרי ספא ואתרי שותפים דיגיטליים.

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

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