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

Bramus

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

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

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

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

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

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

אחד מתחומי ההתמקדות של 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 (אנימציות) בכלי הפיתוח כדי להשהות את כל האנימציות. כך יש לכם זמן לבדוק את רכיבי ה-pseudo בלי לדאוג שהמעבר בין התצוגות יגיע למצב הסופי שלו. אפשר אפילו להעביר את הסמן באופן ידני על ציר הזמן של האנימציה כדי לראות איך המעברים מתבצעים.

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

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

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

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

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

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

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

כשמגדירים אחד מהמאפיינים המפורטים 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

מעברים בין תצוגות בהיקף מוגבל הם הרחבה מוצעת ל-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. אם נתקלתם בבאג, דווחו על באג ב-Chromium כדי לעדכן אותנו.