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

Bramus

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

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

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

הטמעה של מעברי צפיות

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

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

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

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

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

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