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

Bramus

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

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

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

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

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

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

1. הדפדפן יוצר קובצי snapshot של המצבים הישן והחדש.
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 שמשתמש במעברים בין תצוגות של מסמכים שונים. בהתאם לכך שאתם מתקדמים לתוך הניווט או לא, הדפים מועברים לסטאק או יוצאים ממנו.

מתחילים לפתח

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

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