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

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

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

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

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

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

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

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

כשמגדירים אחד מהמאפיינים המפורטים animation-* ב::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 כדי לעדכן אותנו.