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

Bramus

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

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

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

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

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

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

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

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

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

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

@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 at-rule באמצעות ה-descriptor‏ 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.