מה חדש במעברים בין תצוגות (עדכון 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 וסלקטור ה-CSS‏ :active-view-transition.

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

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

במהלך השנה, צוות React עבד על הוספת מעברים בין תצוגות לליבת React. הם הודיעו על תמיכה ב-react@experimental באפריל, והשבוע, בכנס React, הם העבירו את התמיכה ב-react@experimental אל 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-* longhand ב-::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 או להטמיע בקלות רבה יותר מעבר תצוגה שמופעל בגלילה.

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

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

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