מעברים חלקים עם View Migrate API

Bramus

באמצעות View Transition API תוכלו ליצור מעברים חזותיים חלקים בין תצוגות שונות באתר. כך נוצרת חוויית משתמש חזותית מעניינת יותר למשתמשים כשהם מנווטים באתר, בין אם הוא נבנה כאפליקציה עם כמה דפים (MPA) ובין אם הוא נבנה כאפליקציה עם דף יחיד (SPA).

דוגמאות למצבים נפוצים שבהם כדאי להשתמש במעברי תצוגה:

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

הטמעת מעברים בין תצוגות

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

שני סוגי המעבר בין תצוגות מבוססים על אותם אבני בניין ועקרונות:

1. הדפדפן מצלם תמונות מצב של המצב הישן והחדש.
2. ה-DOM מתעדכן בזמן שהעיבוד מושעה.
3. המעברים מבוססים על אנימציות CSS.

ההבדל היחיד בין שני הסוגים הוא האופן שבו מפעילים אותם.

מעברים בין תצוגות של אותו מסמך

מעבר בין תצוגה מפורטת פועל במסמך יחיד נקרא מעבר לתצוגה באותו מסמך. לרוב זה המצב באפליקציות של דף יחיד (SPA). יש תמיכה במעברים בין תצוגות באותו מסמך ב-Chrome מגרסה 111.

איך מפעילים את האירוע

כדי להפעיל מעברים בין תצוגות של אותו מסמך, קוראים ל-document.startViewTransition:

function handleClick(e) {
  // Fallback for browsers that don't support this API:
  if (!document.startViewTransition) {
    updateTheDOMSomehow();
    return;
  }

  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

דוגמה

הדוגמה הבאה לכרטיסים היא שירות SPA שבו המערכת משתמשת במעברים בין תצוגות באותו מסמך כדי להנפיש כרטיסים בכל פעם שנוספים או מסירים כרטיסים חדשים.

מתחילים לפתח

כדאי לעיין בדף התיעוד הייעודי כדי לקבל מידע מלא על מעברים בין תצוגות באותו מסמך.

יצירת מעברים בין תצוגות של אותו מסמך

מעברים בין תצוגות במסמכים שונים

מעבר תצוגה מתרחש בין שני מסמכים שונים נקרא מעבר לתצוגה בין מסמכים. זהו מצב אופייני לאתרי MPA. אפשר להשתמש במעברים בין תצוגות במסמכים שונים ב-Chrome מגרסה 126 ואילך.

איך מפעילים את האירוע

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

כדי להביע הסכמה, משתמשים בקטע הקוד הבא ב-CSS:

@view-transition {
  navigation: auto;
}

דוגמה

הדוגמה הבאה ל-Stack Navigator היא MPA שמשתמש במעברים בין תצוגות של מסמכים שונים. בהתאם לכך שאתם מתקדמים לניווט מעמיק יותר או לא, הדפים מועברים לסטאק או יוצאים ממנו.

מתחילים לפתח

מידע נוסף על מעברים בין תצוגות במסמכים שונים

יצירת מעברים בין תצוגות במסמכים שונים