באמצעות View Transition API אפשר לעדכן את ה-DOM בשלב אחד, תוך יצירת מעבר מונפש בין שני המצבים.
מפתחים רבים, כולל אני, ביקשו לקבל תכונה כזו, ואנחנו חושבים שהצלחנו להוסיף אותה בצורה שמאזנת בין הגדרות ברירת מחדל טובות לבין יכולת התאמה אישית והרחבה. אולי זה נשמע כמו מחיאות כפיים לעצמנו, אבל המשוב של המפתחים היה המפתח לתכנון התכונה הזו. אב טיפוס קודם של התכונה הזו היה גמיש הרבה פחות, ואנשים (כמוכם?) שהקדישו זמן כדי לשחק עם האבות הטיפוס ולספק משוב גרמו לנו לחשוב מחדש לגמרי. תודה!
כדי להבין את התכונה ולנסות כמה הדגמות, עיינו במדריך שלנו. אם יש משהו שלא מופיע שם, אפשר לפנות אליי ב-Twitter, ב-Mastodon או באימייל.
View Transition API זמין כרגע רק ב-Chrome, אבל אפשר להשתמש בו כשיפור הדרגתי. המדריך כולל פונקציית עזר שאפשר להשתמש בה בדפדפנים שונים, אבל רק בדפדפנים שתומכים במעברי תצוגה תופיע האנימציה.
פיתחנו את התכונה הזו בקבוצת העבודה של CSS, עם משוב מספקים אחרים של דפדפנים ומספקים עצמאיים. אנחנו לא יודעים אם דפדפנים אחרים יתחילו להשתמש במעברי תצוגה, או מתי הם יעשו זאת, אבל כדאי לעקוב אחרי עמדת Mozilla בנושא תקנים וגם אחרי עמדת WebKit בנושא תקנים.
אבל אנחנו עדיין לא 'סיימנו'!
הפונקציונליות שנוספה לגרסה 111 של Chrome היא רק הגרסה הראשונה. אנחנו מקווים שכבר מצאנו את כל הבאגים, אבל אם נתקלתם בבעיות, תוכלו לדווח עליהן ב-crbug.com, רצוי עם הדגמה מקוצרת. אם אתם לא מכירים את הפלטפורמות האלה או לא מרגישים בנוח להשתמש בהן, תוכלו לפנות אליי ב-Twitter, ב-Mastodon או באימייל ואעזור לכם.
הגרסה הזו היא חלק קטן, אבל אנחנו מקווים שימושי, בתמונה הגדולה. כבר תכננו כמה הרחבות לתכונה הזו כדי להבטיח שהחלקים שאנחנו שולחים היום יהיו תואמים לעתיד.
הנה הצצה למה שאנחנו מתכננים. האפשרויות האלה לא מופיעות לפי סדר עדיפות (אולי האפשרות הראשונה היא החשובה ביותר לרבים), לכן נשמח לקבל מכם משוב לגבי התוספות החשובות ביותר מבחינתכם.
מעברים בין מסמכים
לדעתי, זהו הנושא הבא שרוב המפתחים רוצים שנעבוד עליו, והחדשות הטובות הן שאנחנו כבר עובדים עליו!
ה-View Transitions API תוכנן כך שיוכל לפעול במסמכים מאותו מקור. ההבדל היחיד הוא שבמקום ש-startViewTransition יסמן את השינוי במצב ה-DOM, הניווט עצמו יסמן את השינוי הזה.
אב הטיפוס שלנו לכך מופיע מאחורי הדגל chrome://flags/#view-transition-on-navigation. הנה הדגמה פשוטה במיוחד והדגמה מורכבת יותר.
כדי להמשיך בתהליך, אנחנו צריכים להבין איך כל דף מצטרף למעבר. בשלב הזה אנחנו משתמשים במטא תג: <meta name="view-transition" content="same-origin">, אבל אנחנו חושבים ש-CSS הוא מקום טוב יותר לכך. אנחנו גם רוצים להקל עליכם לדעת איזה סוג דף אתם עוברים ממנו, רצוי בלי צורך לכתוב JavaScript.
יש לנו הרבה עבודה לעשות, ואנחנו מעדיפים להשקיע זמן כדי שהתכונה תהיה מושלמת ולא להאיץ את התהליך, אבל זו בהחלט עדיפות גבוהה עבורנו.
אנימציות שמבוססות על רכיב 'מרכז עיבוד נתונים'
בחרנו להוסיף אנימציה לרוחב ולגובה של קבוצות המעבר כברירת מחדל, כי קל יותר להתאים אותן אישית. עם זאת, המשמעות היא שהאנימציה פועלת בשרשור הראשי, וזו לא אפשרות אידיאלית, במיוחד במהלך טעינת דפים.
אנחנו מתכננים לזהות את אנימציות ברירת המחדל וההתאמות האישיות הנפוצות, ולאחר מכן לפרש אותן מחדש כאנימציות שמבוססות על עיבוד תמונה (compositing), כדי לשפר את הביצועים.
מעברים ברמת ההיקף
בשלב הזה, מעברים ב-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 באמצעות Web Animations API, אבל לפעמים צריך להפעיל את התהליך פריים אחרי פריים באמצעות requestAnimationFrame.
כבר אפשר לעשות את זה, אבל זה קצת מסורבל. כאן יש הדגמה עם כמה פונקציות עזר שיכולות להיות שימושיות. אנחנו רוצים שהיא לא תהיה 'פריצה'.
נבצע זאת בשני חלקים. אחת מהן היא לספק ממשק API כדי לציין מתי האנימציה מסתיימת. ושנית, על ידי מתן גישה של JavaScript לפסאודו-רכיבים. יכול להיות שהחלק השני יהיה משימה גדולה למדי, אבל נראה שזו הדרך הנכונה לעשות זאת לטווח הארוך.
עכשיו אפשר ליצור מעברים נהדרים בין תצוגות.
אני מקווה שגם אתם מתרגשים מההווה ומהעתיד של התכונה הזו כמוני. אם יש לכם משוב או שאתם רוצים להראות לי כמה מעברים בין תצוגות שיצרתם, בין שהם חלקים ופונקציונליים ובין שהם פשוט מצחיקים, אתם מוזמנים לפנות אליי ב-Twitter או ב-Mastodon.