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

Bramus

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

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

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

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

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

תמיכה בדפדפן

• 126
• 126
• X
• X

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

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

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

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

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

@view-transition {
  navigation: auto;
}

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

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

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

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

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

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

תמיכה בדפדפן

• 125
• 125
• X
• X

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

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

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

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

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

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

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