מעברים בין רכיבים בקבוצה

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

שלבי ההטמעה

1. הקצאת שמות ייחודיים וסיווג משותף

   לכל רכיב שצריך לעקוב אחריו בנפרד במהלך מעבר צריך להיות view-transition-name ייחודי.

   <!-- Mandatory: Each element must have a unique view-transition-name -->
   <li style="view-transition-name: item-1" class="item">Item 1</li>
   <li style="view-transition-name: item-2" class="item">Item 2</li>
   

   כדי להחיל סגנונות משותפים, צריך להקצות גם view-transition-class.

   .item {
     view-transition-class: list-item;
   }
   

2. הגדרת הלוגיקה של המעבר המשותף

   משתמשים ברכיב המדומה ::view-transition-group() עם בורר המחלקות כדי להחיל סגנונות על כל החברים בקבוצה הזו.

   /* Targets any view transition group that has the 'list-item' class */
   ::view-transition-group(.list-item) {
     animation-duration: 0.5s;
     animation-timing-function: ease-in-out;
   }
   
   /* Handle accessibility by respecting motion preferences */
   @media (prefers-reduced-motion: reduce) {
     /* Disable all group transitions, including the default `root` group. */
     ::view-transition-group(*),
     ::view-transition-old(*),
     ::view-transition-new(*) {
       animation: none !important;
     }
   }
   

3. אופציונלי: הגדרת אנימציות כניסה ויציאה

   משתמשים בסלקטור :only-child כדי להוסיף מעברים ספציפיים לרכיבים שנוספים או מוסרים. הרכיבים המדומים ::view-transition-new() ו-::view-transition-old() הם צאצאים של הרכיב המדומה ::view-transition-image-pair(), כך שאנחנו יכולים לקבוע אם מדובר ברכיב שנוסף או הוסר אם הוא הצאצא היחיד.

   /* A `::view-transition-new()` element is the only child if it wasn't present before the view transition, so it is an added element. */
   ::view-transition-new(.list-item):only-child {
     animation-name: slide-in;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   /* A `::view-transition-old()` element is the only child if it isn't present after the view transition, so it is a removed element. */
   ::view-transition-old(.list-item):only-child {
     animation-name: slide-out;
     /* Specify an animation duration if you want something different than the UA default of 0.5s */
     animation-duration: 1s;
   }
   
   @keyframes slide-in {
     from {
       translate: -100vw 0;
     }
   }
   @keyframes slide-out {
     to {
       translate: -100vw 0;
     }
   }
   

4. הפעלת המעבר

   עוטפים את עדכון ה-DOM ב-document.startViewTransition(). הדפדפן יתעד את המצב הישן, יבצע את העדכון ואז יציג אנימציה למצב החדש.

   function updateList(newData) {
     document.startViewTransition(() => {
       // All DOM changes inside this callback will be transitioned
       render(newData);
     });
   }
   

5. שמירה על האינטראקטיביות של רכיבים לא טרנזיטיביים

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

::view-transition {
  /* Non-transitioned elements below the view transitions remain interactive */
  pointer-events: none;
}

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

:root {
  /* Disable the root transition because we are only transitioning specific elements. */
  view-transition-name: none;
}

אסטרטגיות חלופיות

מעברי תצוגה הם שיפור הדרגתי (progressive enhancement). אם הדפדפן לא תומך ב-document.startViewTransition, עדכון ה-DOM עדיין אמור להתרחש באופן מיידי, ולספק חוויה פונקציונלית אבל ללא אנימציה.

if (document.startViewTransition) {
  document.startViewTransition(() => updateDOM());
} else {
  // Fallback: Perform the update without animation
  updateDOM();
}

ב-CSS, דפדפנים שלא מזהים את view-transition-class או את הסלקטור של המחלקה ::view-transition-group() פשוט יתעלמו מהכללים האלה, ולא תופעל אנימציה.