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

Bramus

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

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

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

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

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

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

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

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

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

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

אני רוצה להתחיל לפתח

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

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