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

Bramus

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

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

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

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

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

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

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

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

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

@view-transition {
  navigation: auto;
}

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

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

• עם pageswap אפשר לבצע שינויים של הרגע האחרון בדף היוצא, ממש לפני שצילומי המסך הישנים יצולמו.
• עם 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

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

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

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

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

כדי לקבל מידע נוסף על view-transition-class, אפשר לקרוא את התיעוד הייעודי ב-view-transition-class.

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

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

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

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

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

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

const direction = determineBackwardsOrForwards();

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

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

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

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

/* 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 במקום זאת.