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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

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

תמיכה בדפדפן

  • 111
  • 111
  • x
  • x

מקור

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

redBus

RedBus תמיד ניסה ליצור כמה שיותר התאמה בין חוויית המשתמש המקומית לבין חוויית האינטרנט. לפני השימוש ב-View Transitions 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;
 }
}

טוקופדיה

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

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

לפני

אחרי

קוד

הקוד הבא משתמש ב-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 Transitions API באלמנטים של טיפים כמו "למה לקנות", ולכן הם מושכים מבחינה חזותית ומשפרות את השימוש בתכונות כאלה.

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

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

קוד

הקוד הבא דומה לדוגמאות הקודמות. חשוב לציין את היכולת לשנות את ברירת המחדל לסגנונות ולאנימציות של ::view-transition-old(root)ו-::view-transition-new(root). במקרה הזה, ברירת המחדל של animation-duration עודכנה ל-0.4s.

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 Transitions API

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

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

משאבים

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