פורסם: 10 בספטמבר 2025
מעברים מוגבלים בין תצוגות הם הרחבה מוצעת ל-View Transition API, שמאפשרת להתחיל מעבר בין תצוגות בעץ משנה של ה-DOM. התכונה מוכנה לבדיקה מגרסה Chrome 140 עם ההגדרה 'תכונות ניסיוניות של פלטפורמת האינטרנט' שמופעלת ב-chrome://flags. אנחנו מחפשים באופן פעיל משוב ממפתחים.
מבוא מהיר
כדי להתחיל מעבר תצוגה בהיקף מוגבל, קוראים ל-element.startViewTransition() (במקום ל-document.startViewTransition()) בכל HTMLElement עם contain: layout שמוחל עליו.
document.querySelector('nav').startViewTransition({
callback: () => {
// … code that manipulates the contents of <nav>
},
})
התוצאה היא מעבר תצוגה שמצומצם לעץ המשנה של HTMLElement שבחרתם, ועץ פסאודו ::view-transition שנוצר מוזרק ל-HTMLElement הזה. התג HTMLElement משמש כמאגר לאנימציות המעבר.
html
├─ head
└─ body
├─ nav
│ ├─ ::view-transition
│ │ └─ ::view-transition-group(thing)
│ │ └─ ::view-transition-image-pair(thing)
│ │ ├─ ::view-transition-old(thing)
│ │ └─ ::view-transition-new(thing)
│ └─ ul
│ ├─ li
│ ├─ li
│ └─ li
└─ main
└─ …
מעברים בהיקף מוגבל מאפשרים להפעיל כמה מעברים בין תצוגות בו-זמנית (כל עוד יש להם שורשי מעבר שונים). אירועי הצבעה נמנעים רק בעץ המשנה הזה (שאפשר להפעיל מחדש), ולא בכל המסמך. בנוסף, הם מאפשרים לצייר רכיבים מחוץ לשורש המעבר על גבי מעבר התצוגה המוגבל.
במאמר הזה מוסבר על מעברים בין תצוגות בהיקף מוגבל.
הדגמה (דמו)
בהדגמה הבאה, אפשר להזיז נקודה בתוך המאגר שלה על ידי לחיצה על אחד מהלחצנים. אפשר לעשות את זה באמצעות מעברים בין תצוגות בהיקף המסמך או בהיקף הרכיב, כדי לראות את ההבדלים בהתנהגות שלהם.
הדגמה בשידור חי
הקלטת הדגמה
במעברים עם תצוגה מוגבלת, הנקודה נשארת חתוכה על ידי הרכיב ההורה במהלך המעבר. בנוסף, הנקודה לא מופיעה מעל חלון הקופץ כשהוא מוצג.
נשמח לקבל משוב
נשמח לקבל משוב מקהילת מפתחי האתרים בנושאים הבאים:
- הצורה של Scoped View Transitions API.
- תרחישי שימוש שבהם התכונה פועלת היטב או לא פעלה כמצופה.
- איך לפתור את השאלות לגבי היקפים של השתתפות עצמית.
אתם יכולים לשתף את המשוב שלכם בתגובה לבעיה מספר 9890 בקבוצת העבודה CSS. לפני ששולחים משוב, מומלץ לעיין בבעיות הידועות ובמגבלות.
אם נתקלתם בבאג, דווחו על באג ב-Chromium כדי לעדכן אותנו.