ה-View Migrate API מאפשר לעדכן את ה-DOM בשלב אחד וליצור מעבר מונפש בין שני המצבים.
סוגי המעברים האלה היו תכונה שהתבקשה לעיתים קרובות ממפתחים, כולל אני, ואני חושב שהצלחנו להגיע אליהם באופן שמאזן ברירות מחדל טובות עם יכולת הרחבה והתאמה אישית. זה נשמע כאילו אנחנו נותנים לעצמנו טפיחה על השכם, אבל מפתח משוב היה המפתח לעיצוב של התכונה הזו. אב טיפוס מוקדם יותר של התכונה הזו היה הרבה פחות גמיש, וחברים (כמוכם?) שהקדישו זמן כדי לשחק עם אבות הטיפוס וסיפקו משוב עוררו חשיבה מחדש מוחלטת. תודה.
כדי להכיר את התכונה ולשחק בהדגמות, כדאי לעיין במדריך שלנו. אם יש משהו שלדעתך לא מופיע שם, אפשר לפנות אליי ב-Twitter, ב-Mastodon או באימייל.
ה-View Transition API זמין כרגע רק ב-Chrome. למרבה המזל, ניתן להשתמש בו כשיפור הדרגתי. המדריך כולל פונקציית עזר שאפשר להשתמש בה בכל הדפדפנים, אבל רק דפדפנים שתומכים במעברים בין צפיות יראו את האנימציה.
פיתחנו את התכונה הזו במסגרת קבוצת העבודה של CSS, בעזרת משוב מספקי דפדפנים אחרים ומשותפים עצמאיים. לא ידוע לנו אם דפדפנים אחרים יסתמכו במעברי תצוגה (View Migrate) או מתי, אך מומלץ לשים לב למיקום של Mozilla ולמיקום תקני של WebKit.
אבל עוד לא סיימנו!
הפונקציונליות לדף נחיתה ב-Chrome 111 היא רק הגרסה הראשונה. אנחנו מקווים שכבר מצאנו את כל הבאגים, אבל מומלץ לדווח על בעיות שמצאת בכתובת crbug.com. עדיף להשתמש בהדגמה מוקטנת. אם הנושא הזה לא מוכר לך או מוכר לך, אפשר לפנות אליי ב-Twitter, ב-Mastodon או בבאימייל, ואשמח לעזור.
הגרסה הזו היא חלק קטן אבל שימושי מתוך תמונה גדולה יותר. כבר רשמנו כמה תוספים לתכונה הזו, כדי להבטיח שחלקים שאנחנו שולחים היום יתאימו בעתיד.
הנה הצצה למה שאנחנו חושבים. סרטונים אלה לא מסודרים לפי סדר העדיפות שלהם (אולי זה הראשון הוא החשוב ביותר להרבה אנשים), אז נשמח לקבל משוב על התוספות שהכי חשובות לכם.
מעברים בין מסמכים
לדעתי רוב המפתחים רוצים שנעבוד על כך בשלב הבא, והחדשות הטובות הן שאנחנו כבר עובדים על זה!
ה-View Migrates API תוכנן כך שהוא יכול לפעול עם מסמכים מאותו מקור. ההבדל היחיד הוא, שבמקום ש-startViewTransition יסמן את השינוי במצב ה-DOM, הניווט עצמו יצביע על השינוי.
אב הטיפוס שלנו של הדגל הזה נמצא מאחורי הדגל chrome://flags/#view-transition-on-navigation. הנה הדגמה פשוטה ביותר והדגמה מורכבת יותר.
כדי להתקדם, עלינו להבין כיצד כל דף בוחר לבצע את המעבר. כרגע אנו משתמשים במטא תג: <meta name="view-transition" content="same-origin">, אבל אנחנו חושבים ש-CSS הוא מקום טוב יותר לשם כך. אנחנו רוצים גם שיהיה קל יותר לדעת מאיזה סוג של דף אתם מבצעים את המעבר, עדיף בלי שתצטרכו לכתוב JavaScript.
יש הרבה עבודה לעשות, ואנחנו מעדיפים לתת אותה 'נכון' מאשר 'מהירה', אבל זה בהחלט בראש סדר העדיפויות שלנו.
אנימציות המבוססות על קומפוזיטור
בחרנו להנפיש רוחב וגובה בקבוצות מעבר כברירת מחדל, מפני שקל יותר להתאים אותם אישית. עם זאת, פירוש הדבר שהאנימציה רצה ב-thread הראשי, וזה לא אידיאלי, במיוחד במהלך טעינת הדף.
אנחנו מתכננים לזהות את הנפשות ברירת המחדל והתאמות נפוצות, ולאחר מכן לפרש אותן מחדש כאנימציות מבוססות-קומפוזיטור כדי לשפר את הביצועים.
מעברים לפי היקף
בשלב זה, מעברים של SPA מוגבלים למסמך כולו, ורק מעבר אחד יכול לפעול בכל פעם. אנחנו רוצים להוסיף תכונה שמאפשרת להקצות את ההיקף של המעברים לרכיב מסוים, כדי שכמה רכיבי דף יוכלו להפעיל מעברים בנפרד.
כך, למשל, נגן וידאו מוטמע יוכל להשתמש במעברי צפייה במקביל לווידג'ט מוטמע של הצ'אט.
קבוצות מעבר מקננות
כרגע כל ה-::view-transition-group הם אחים. בדרך כלל זה דבר טוב כי הוא מאפשר מעבר של תצוגות ממאגר אחד למאגר אחר, ואין צורך לדאוג בנוגע לחיתוך.
עם זאת, לפעמים רוצים שהתצוגה תיחתך על ידי הורה, שגם יכול להיות מעורב במעבר.
אנחנו רוצים לחקור הסכמה שממקמת ::view-transition-group מסוים בתוך ::view-transition-group אחר.
מחלקות של מעברים
כל view-transition-name חייב להיות ייחודי. כך אנחנו מזהים שרכיב מסוים הוא 'אותו הדבר' משני הצדדים של שינוי ה-DOM, אפילו אם הוא לא אותו רכיב.
עם זאת, לפעמים פריטים עם ערכי view-transition-name שונים צריכים להשתמש באותו סוג אנימציה. כרגע פירוש הדבר הוא שהוספת כלל בורר לכל view-transition-name.
אנחנו רוצים להוסיף דרך ליצירת מחלקות של מעברים כדי להתגבר על המגבלה הזו.
התעלמות מאלמנטים שאינם במסך
אם נותנים לרכיב view-transition-name, הוא יהיה מעורב במעבר כקבוצה משלו. לפעמים זה לא אידיאלי. לדוגמה, אם נתת לכותרת view-transition-name ואתה עובר ממצב שבו גללת למטה ב-2,000 פיקסלים, למצב בחלק העליון של הדף, הכותרת יונפש ממרחק של 2,000 פיקסלים, דבר שנראה שגוי מבחינת התזמון.
במקום זאת, אנחנו רוצים להוסיף הבעת הסכמה שבה המערכת תתעלם מרכיב מסוים, כאילו אין לו view-transition-name, אם הוא נמצא מחוץ לאזור התצוגה.
אפשר כבר לעשות זאת עם JavaScript על ידי הגדרה דינמית של style.viewTransitionName, אבל נראה שאנחנו צריכים פתרון הצהרתי לכך.
אנימציות המבוססות על requestAnimationFrame
כבר אפשר ליצור אנימציות מעבר בין צפיות באמצעות JavaScript באמצעות ממשק ה-API של אנימציות באינטרנט, אבל לפעמים צריך להעביר את התוכן לכל פריים בנפרד באמצעות requestAnimationFrame.
אפשר כבר לעשות את זה, אבל הוא קצת פרוע. הנה הדגמה עם כמה כלים מועילים. אנחנו רוצים שהוא יהיה קל ופשוט!
נבצע זאת בשני חלקים. אחת: הוספת API שמאפשר לציין מתי האנימציה הסתיימה. והשניה, על ידי מתן גישה ל-JavaScript לפסאודו-אלמנטים. החלק השני הזה אולי יהיה משימה די גדולה, אבל זו הרגשה הנכונה לטווח הארוך.
עכשיו לך לעשות כמה מעברי תצוגה מעולים!
אני מקווה, כמוני, שאתם מתרגשים לקראת ההווה והעתיד של התכונה הזו. אם יש לכם משוב, או אם אתם רוצים להראות כמה מעברי תצוגה שביצעתם, בין אם הם חלקים ופונקציונליים, או רק פשוטים מטופשים, פנו אליי ב-Twitter או ב-Mastodon!