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

Swetha Gopalakrishnan
Swetha Gopalakrishnan
X
Saurabh Rajpal
Saurabh Rajpal
X

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

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

תמיכה בדפדפן

  • 111
  • 111
  • x
  • 18

מקור

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

redBus

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

ששילבנו את מעברי View throughs (מעברי תצוגה), וביטלנו את ה-CSS וקוד ה-JavaScript שחוזרים על עצמם כדי לנהל אנימציות במדינות שונות. כך חסכו במאמצי הפיתוח ושיפרו משמעותית את חוויית המשתמש – Aman Soni, Tech Lead, 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

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

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

מקורות מידע

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