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

Bramus

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

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

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

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

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

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

תמיכה בדפדפנים

• 126
• 126
• x
• 

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

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

מעבר בין תצוגות של אותו מסמך, כפי שמוצג ב-Airbnb.

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

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

@view-transition {
  navigation: auto;
}

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

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

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

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

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

הערה: ב-Chrome 126, מעברים בין תצוגות במסמכים שונים מופעלים רק לניווטים בפריים הראשי. תמיכה ב-Iframe תתווסף בגרסה עתידית של Chrome. למטרות פיתוח, אפשר להפעיל תמיכה בניווט ב-iframe דרך chrome://flags/#view-transition-on-navigation-iframe.

הדגמה (דמו)

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

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

זהו 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

תמיכה בדפדפנים

• 125
• 125
• x
• 18.2

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

עכשיו אפשר להוסיף שם משותף לכל קובצי ה-snapshot באמצעות view-transition-class. משתמשים בשם המשותף הזה בבוררי הפסאודו כדי לטרגט את כל קובצי ה-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, אותו animation-timing-function חל על כל הכרטיסים, מלבד הכרטיסים שנוספו או הוסרו.

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

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

תמיכה בדפדפנים

• 125
• 125
• x
• 18

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

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

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

לפני סוגי הרכיבים הפעילים, אפשר היה להוסיף כיתות ל-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 במקום זאת.