מה חדש במעברים של הצפיות? (עדכון מ-Google I/O 2024)

Bramus

תאריך פרסום: 16 במאי 2024

באירוע Google I/O 2024 הכרזתי על השלב הבא בהעברות בין תצוגות: העברות בין תצוגות במסמכים שונים באפליקציות עם כמה דפים (MPA).

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

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

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

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

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

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

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

כדי להפעיל מעברים בין תצוגות במסמכים שונים, צריך להביע הסכמה בשני הקצוות. כדי לעשות את זה, צריך להשתמש בכלל @view-transition בכלל, ולהגדיר את התיאור navigation כ-auto.

@view-transition {
  navigation: auto;
}

מעברים בין תצוגות במסמכים שונים מבוססים על אותם אבני בניין ועל אותם עקרונות כמו מעברים בין תצוגות באותו מסמך. המערכת מתעדת רכיבים עם view-transition-name מיושם, ואפשר להתאים אישית את האנימציות באמצעות אנימציות CSS.

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

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

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

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

הדגמה (דמו)

ההדגמה הזו של Stack Navigator משלבת את כל התכונות האלה (יחד עם כמה שיפורים).

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

window.addEventListener("pagereveal", async (e) => {
  if (e.viewTransition) {
    // Determine animation type based on the old/new history entries
    const transitionClass = determineTransitionClass(navigation.activation.from, navigation.currentEntry);
    document.documentElement.dataset.transition = transitionClass;

    // Cleanup after transition ran
    await e.viewTransition.finished;
    delete document.documentElement.dataset.transition;
  }
});

לקריאת מסמכי התיעוד

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

הצגת השיפורים במעברים

בנוסף לשיפורים בנושא מעברים בין תצוגות במסמכים שונים ב-MPA, ב-Chrome יש גם כמה שיפורים כלליים בעבודה עם מעברים בין תצוגות.

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

שיתוף סגנונות אנימציה עם view-transition-class

עד עכשיו, כשרציתם ליצור אנימציה של כמה קובצי snapshot באותו אופן, הייתם צריכים לטרגט כל קובץ snapshot בנפרד על ידי חזרה על פסאודו-סלקטור שלו לכל רכיב שיש לו view-transition-name ייחודי.

עכשיו אפשר להשתמש ב-view-transition-class כדי להוסיף שם משותף לכל קובצי ה-snapshot. משתמשים בשם המשותף הזה בבוררי הפסאודו כדי לטרגט את כל קובצי ה-snapshot שתואמים. כך אפשר ליצור בוררים פשוטים יותר, שמתאימים באופן אוטומטי לרכיבים רבים.

#cards-wrapper > div {
  view-transition-class: card;
}
html::view-transition-group(.card) {
  animation-timing-function: var(--bounce);
}

בדוגמה הבאה של כרטיסים נעשה שימוש ב-view-transition-class כדי להחיל את אותו תזמון אנימציה על מספר רב של קובצי snapshot באמצעות בורר אחד.

מידע נוסף על view-transition-class זמין במסמכי התיעוד הייעודיים בנושא view-transition-class.

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

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

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

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

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

למעברים בין תצוגות באותו מסמך, מעבירים את types ל-method startViewTransition שמקבלת אובייקט. update היא פונקציית הקריאה החוזרת שמעדכנת את ה-DOM, ו-types היא רצף של מחרוזות.

const direction = determineBackwardsOrForwards();

const t = document.startViewTransition({
  update: updateTheDOMSomehow,
  types: ['slide', direction],
}););

כדי לבצע מעבר בין תצוגות במסמכים שונים, מגדירים את הסוגים בכלל at-rule‏ @view-transition באמצעות המתאר types או מגדירים אותם בזמן אמת באירועים pageswap ו-pagereveal.

@view-transition {
  navigation: auto;
  types: slide, forwards;
}

אחרי שמגדירים את הסוגים, אפשר להגיב לסוגים האלה ב-CSS באמצעות הסלקטורים של פסאודו-הקלאסה :active-view-transition-type() ו-:active-view-transition שחלים על שורש המעבר בין תצוגות.

/* Animation styles for forwards type only */
html:active-view-transition-type(forwards) {
  &::view-transition-old(content) {
    animation-name: slide-out-to-left;
  }
  &::view-transition-new(content) {
    animation-name: slide-in-from-right;
  }
}

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

משוב

אנחנו תמיד שמחים לקבל משוב ממפתחים. כדי לעשות זאת, צריך לדווח על בעיה בקבוצת העבודה של CSS ב-GitHub עם הצעות ושאלות. מוסיפים את הקידומת [css-view-transitions] לבעיה.

אם נתקלתם בבאג, תוכלו לדווח על באג ב-Chromium במקום זאת.