מה חדש במעברים בין תצוגות (עדכון 2025)

Bramus

תאריך פרסום: 8 באוקטובר 2025

הרבה השתנה מאז שהשקנו את מעברי התצוגה באותו מסמך בשנת 2023.

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

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

תמיכה משופרת בדפדפנים ובמסגרות

מעברים בתצוגה באותו מסמך יהפכו בקרוב לזמינים כ-Baseline Newly available

אחד מתחומי ההתמקדות של Interop 2025 הוא View Transition API (ממשק API למעבר בין תצוגות), ובפרט מעברים בין תצוגות באותו מסמך עם document.startViewTransition(updateCallback), view-transition-class, מתן שמות אוטומטי עם view-transition-name: match-element והסלקטור :active-view-transition ב-CSS.

ב-Firefox מתכוונים לכלול את התכונות האלה בגרסה הקרובה של Firefox 144, שתהפוך ליציבה ב-14 באוקטובר 2025. כך התכונות האלה יהיו זמינות ב-Baseline.

התמיכה ב-View Transition API נמצאת עכשיו ב-React core

במהלך השנה, צוות React עבד על הוספת מעברים בין תצוגות לליבת React. הם הודיעו על תמיכה ב-react@experimental באפריל, והשבוע, בכנס React, הם העבירו את התמיכה ב-react@canary, מה שאומר שהעיצוב קרוב לסיום.

function Child() {
  return (
    <ViewTransition>
      <div>Hi</div>
    </ViewTransition>
  );
}

function Parent() {
  const [show, setShow] = useState();
  if (show) {
    return <Child />;
  }
  return null;
}

אפשר לעיין במסמכי <ViewTransition> React כדי לקבל את כל הפרטים, או לצפות בהרצאה הזו של Aurora Scharff כדי לקבל מבוא טוב לנושא.

תכונות שהושקו לאחרונה

מתן שמות אוטומטי לרכיבים באמצעות view-transition-name: match-element

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

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

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

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

.card {
  view-transition-name: match-element;
  view-transition-class: card;
}

#targeted-card {
  view-transition-name: targeted-card;
  view-transition-class: none;
}

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

/* Style all pseudos with the class .card */
::view-transition-group(*.card) {
  animation-timing-function: var(--bounce-easing);
  animation-duration: 0.5s;
}

/* Style only the targeted-card's pseudos */
::view-transition-old(targeted-card):only-child {
  animation: animate-out ease-out 0.5s forwards;
}
::view-transition-new(targeted-card):only-child {
  animation: animate-in ease-in 0.25s forwards;
}

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

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

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

קבוצות מעברים מוטמעות זמינות מגרסה Chrome 140

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

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

התכונה Nested view transition groups מאפשרת לכם להשתמש עכשיו ב-::view-transition-group pseudo-elements בתוך אחד מהשני. כשמקננים קבוצות של מעברי תצוגה, אפשר לשחזר אפקטים כמו חיתוך במהלך המעבר.

איך משתמשים בקבוצות של מעברי תצוגה

אלמנטים פסאודו יורשים עכשיו יותר מאפייני אנימציה

כשמגדירים אחד מהמאפיינים המפורטים animation-* ב-pseudo ::view-transition-group(…), גם המאפיינים ::view-transition-image-pair(…), ::view-transition-old(…) ו-::view-transition-new(…) שכלולים בו מקבלים בירושה את המאפיין הזה. התכונה הזו שימושית כי היא שומרת על סנכרון אוטומטי בין ההנמכה ההדרגתית של ::view-transition-new(…) וההגברה ההדרגתית של ::view-transition-old(…) לבין ::view-transition-group(…).

::view-transition-group(.card) {
  animation-duration: 0.5s;
}

בהתחלה, ההורשה הזו הייתה מוגבלת ל-animation-duration ול-animation-fill-mode (ומאוחר יותר גם ל-animation-delay), אבל עכשיו היא הורחבה כך שהיא כוללת יותר מאפיינים מקוצרים של אנימציה.

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

:root::view-transition-image-pair(*),
:root::view-transition-old(*),
:root::view-transition-new(*) {
  animation-duration: inherit;
  animation-fill-mode: inherit;
  animation-delay: inherit;
  animation-timing-function: inherit;
  animation-iteration-count: inherit;
  animation-direction: inherit;
  animation-play-state: inherit;
}

התכונה pseudo-elements inheriting more properties הושקה ב-Chrome 140.

הביצוע של הקריאה החוזרת (callback) של ההבטחה finished כבר לא ממתין למסגרת

כשמשתמשים ב-promise‏ finished כדי להפעיל קריאה חוזרת (callback), בעבר Chrome היה ממתין ליצירת פריים לפני הפעלת הלוגיקה הזו. יכול להיות שיווצר הבהוב בסוף האנימציה כשהסקריפט מעביר סגנונות מסוימים בניסיון לשמור על מצב דומה מבחינה ויזואלית.

 document.startViewTransition(() => {
  if (from) {
    dfrom.classList.remove("shadow");
    dto.appendChild(target);
  } else {
    dto.classList.remove("shadow");
    dfrom.appendChild(target);
  }
}).finished.then(() => {
  if (from) {
    dto.classList.add("shadow");
  } else {
    dfrom.classList.add("shadow");
  }
  from = 1 - from;
});

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

השינוי הזה בתזמון שוחרר ב-Chrome 140.

תכונות שיושקו בקרוב

השנה עוד לא הסתיימה, אז יש לנו עוד זמן להשיק עוד תכונות.

מעברים בין תצוגות בהיקף מוגדר מוכנים לבדיקה ב-Chrome 140

Scoped view transitions הוא תוסף מוצע ל-View Transition API, שמאפשר להתחיל מעבר בין תצוגות בעץ משנה של ה-DOM באמצעות קריאה ל-element.startViewTransition() (במקום document.startViewTransition()) בכל HTMLElement.

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

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

התכונה מוכנה לבדיקה מגרסה Chrome 140 עם ההגדרה 'תכונות ניסיוניות של פלטפורמת האינטרנט' שמופעלת ב-chrome://flags. אנחנו מחפשים באופן פעיל משוב ממפתחים.

המיקום של ::view-transition ישתנה מ-fixed ל-absolute ב-Chrome 142

המיקום של פסאודו ::view-transition נקבע כרגע באמצעות position: fixed. בעקבות החלטה של קבוצת העבודה של CSS, הערך הזה ישתנה ל-position: absolute.

השינוי הזה בערך של position מ-fixed ל-absolute – שיגיע ל-Chrome 142 – לא נראה לעין כי הבלוק שמכיל את פסאודו ::view-transition הוא ממילא הבלוק שמכיל את התמונה. ההשפעה היחידה שניתן לראות היא ערך position שונה כשמבצעים getComputedStyle.

‫document.activeViewTransition מגיע ל-Chrome 142

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

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

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

התמיכה ב-document.activeViewTransition עומדת להיות מושקת ב-Chrome 142.

איך מונעים את הסיום האוטומטי של מעבר תצוגה באמצעות ViewTransition.waitUntil

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

const t = document.startViewTransition(…);
t.waitUntil(async () => {
  await fetch(…);
});

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

המאמרים הבאים

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

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