דף זה תורגם על ידי Cloud Translation API.

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

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

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

מקור

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

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