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

Bramus

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

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

  • תמונה ממוזערת בדף פרטי המוצר, שמעבירה את התמונה לתמונה בגודל מלא בדף פרטי המוצר.
  • סרגל ניווט קבוע שנשאר בתוקף בזמן שמנווטים מדף לדף.
  • רשת עם פריטים שעוברים מיקומים בהתאם לסינון.
מעברים שנוצרו באמצעות View Transit API. אפשר לנסות את אתר ההדגמה. נדרש Chrome מגרסה 111 ואילך.

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

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

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

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

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

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

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

תמיכה בדפדפן

  • 111
  • 111
  • x
  • 18

מקור

איך להפעיל את הקמפיין

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

הקלטה של ההדגמה של הכרטיסים. נדרש Chrome מגרסה 111 ואילך.

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

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

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

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

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

תמיכה בדפדפן

  • 126
  • 126
  • x
  • x

מקור

איך להפעיל את הקמפיין

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

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

@view-transition {
  navigation: auto;
}

דוגמה

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

הקלטה של ההדגמה של Stack Navigator. נדרש Chrome מגרסה 126 ואילך.

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

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

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