היום אנחנו רוצים לשתף פרטים נוספים על הדרך של Chrome ו-Astro עם View Transitions API. בין היתר, נסביר איך קהילת Astro אימצה את ה-API והשתמשה בו כבר בשלב מוקדם, והדגשת האפשרויות לקהילה הרחבה יותר. אנחנו גם שמחים לשתף מידע נוסף על התמיכה המובנית החדשה במעברי תצוגה ב-Astro 3.0.
רקע
תמיד היה קשה ליצור מעברים חלקים בין מצבים שונים של דף, שנקראים מעברי מצבים, כחלק מתהליך היצירה של חוויות אנימציה חלקות באינטרנט. למרות שקיימים כלים כמו מעברי CSS, אנימציות CSS ו-Web Animation API, יצירת מעברי מצבים עדיין היא משימה מאתגרת. אחד מהאתגרים הוא טיפול באינטראקציה עם אלמנטים יוצאים, שיכול להפוך את המעברים ליותר מורכבים.
בנוסף, קשה לשמור על מיקום הקריאה ועל המיקוד במכשירים מסייעים. בנוסף, הטיפול בהבדלים במיקומי גלילה הופך את מעברי המצבים לתהליך מסורבל. כל הגורמים האלה מוסיפים למורכבות של הטמעת מעברים חלקים בין רכיבים שונים בדף אינטרנט.
View Transitions API הוא הפתרון של הדפדפן לאתגרים האלה. ה-API החדש הזה מספק דרך קלה יותר לשנות את ה-DOM בשלב אחד, תוך יצירת מעבר מונפש בין שני מצבים.
השקת View Transitions API ב-Chrome 111 סימנה את תחילת החזון הרחב יותר שלנו לתמיכה במעברים בכל האתרים, ולא רק באפליקציות אינטרנט שמבוססות על JavaScript. אנחנו גם מתכננים שיפורים נוספים. בעתיד, יכול להיות שנסקור ב-Chrome תוספות מעניינות כמו מעברים בין מסמכים, אנימציות מבוססות-קומפוזיטור, מעברים ברמת ההיקף וקבוצות מעברים בתצוגת עץ.
ניתוחים מוקדמים עם מעברים בין תצוגות
הדרך של Chrome עם View Transitions API לא הייתה דרך בודדת. המשוב והשיתוף פעולה של מפתחים, מחברי מסגרות עבודה וקבוצת העבודה של CSS שיחקו תפקיד חיוני בעיצוב התכונה במשך כמה שנים.
כבר בשלב מוקדם, הניסויים של המפתחים שיחקו תפקיד קריטי. הגרסאות המוקדמות ביותר של ה-API לא תמכו באנימציות CSS, והמעברים היו מוגבלים לכמה הגדרות קבועות מראש. כבר מהמשוב הראשוני היה ברור שהמפתחים רצו שהמעברים יהיו ניתנים להתאמה אישית באופן מלא ועם אפשרויות ביטוי רחבות. שיתוף הפעולה הזה הבטיח שה-API תוכנן עם איזון בין ברירת המחדל הנכונות, יכולת ההרחבה וההתאמה האישית.
Astro היה אחד מהמסגרות שהשתמשו במעברי תצוגה בשלב מוקדם. שאר המאמר נכתב מנקודת המבט של צוות Astro, ומשתף את הניסיון שלהם במציאת מעברים בין תצוגות, בהטמעה שלהם ובהצגת האפשרות הזו בחזית תהליך פיתוח האתרים.
למה Astro משקיעה במעברים בין תצוגות
Astro חיפש משהו כמו 'מעבר בין תצוגות' במשך זמן רב. Astro היא מסגרת אינטרנט של JavaScript שמרינדרת בצד השרת את רכיבי ממשק המשתמש ל-HTML קל משקל, כדי לשפר את ביצועי הטעינה של הדפים. מערכת Astro מעבירה כמה שיותר עבודה ממכשיר הלקוח. באתרי Astro נעשה שימוש בניווט מקורי בדפי הדפדפן, בעוד שבמסגרות אינטרנט אחרות יכול להיות שיתבצע פריצה לניווט בדפדפן באמצעות ניתוב של JavaScript בצד הלקוח.
המצב הזה יצר אתגר לצוות Astro: איך אפשר להוסיף ל-Astro אנימציה למעברים בין דפים ולספק עקביות בממשק המשתמש בדפים שונים, כמו באפליקציה, בלי להשתמש בחיבור לקוח?
הפתרון היה פשוט: View Transitions. בעזרת View Transitions, אפשר להשתמש ב-Astro כדי לספק את אותן תכונות ניתוב שזמינות במסגרות אינטרנט מסוג SPA עם הרבה JavaScript, אבל בלי העלות הנוספת של הביצועים והמורכבות של ניתוב בצד הלקוח. במסגרות אחרות, מעבר בין תצוגות נחשב לפריט אופציונלי בהטמעה, אבל ב-Astro זה היה משהו הרבה יותר גדול.
השאלה הבאה שעליה צוות Astro היה צריך לענות הייתה "איך?". הצוות חיפש השראה בפרויקטים כמו Turbo, Swup ו-Livewire, ואפילו יצר אב טיפוס של כמה גישות דומות ב-Astro.
אחת מהניסיונות הראשונים כללה 'מעבר חכם' בדף מלא, שמשויך באופן אוטומטי לכל דף HTML חדש ל-HTML הנוכחי, ולאחר מכן מנסה להחליף כל רכיב בבת אחת באמצעות JavaScript. הפתרון היה חכם, אבל נוטה לשגיאות.
// An early API design for enabling view transitions
// in Astro via top-level config. Never implemented.
export default defineConfig({
router: 'spa'
})
למרבה המזל, קהילת Astro הוכיחה ש-View Transitions API כבר היה חזק בלי שהמוצר יסבך את הדברים יותר מדי. אחרי שצפו בכמה הדגמות מוקדמות, הצוות של Astro התלהב מהרעיון של ממשק Astro API פשוט שיכול להתאים לממשקי ה-API של הדפדפנים בצורה הקרובה ביותר. במקום לראות את מעברי התצוגה כפרט עיבוד בלתי נראה שמוסתר בתוך Astro, אפשר לחשוף אותם ישירות למפתח. התאמת Astro ישירות לפלטפורמת האינטרנט והפחתת המורכבות הכוללת בחזית.
---
// Add a simple fade transition with 2 lines of code!
// 1. Import the <ViewTransitions> component
// 2. Add it to your common/base head component, or individual pages.
import { ViewTransitions } from 'astro:transitions';
---
<head>
<title>My View Transitions Demo</title>
<ViewTransitions />
</head>
<!-- ... -->
העבודה הפכה לפשוטה: להוסיף את View Transitions API החדש ל-Astro ולספק חלופות אוטומטיות שיובילו לכמה שיותר אתרים ודפדפנים. תמיכה בגיבוי חיונית כי רוב הדפדפנים (מלבד Chrome) עדיין לא סיפקו תמיכה מלאה במעברים בין תצוגות מובנות.
השקת תמיכה רשמית ב-Astro
ב-Astro 2.9 נוספה תמיכה ניסיונית במעברים בין תצוגות. התגובה הייתה חיובית באופן מיידי. מפתחים התחילו לשתף הדגמות מדהימות של כל כך הרבה תרחישים לדוגמה, ובמקרים מסוימים אפילו שלחו את כולם לסביבת הייצור.
Astro 3.0, תמיכה סופית וביטול הסימון של View Transitions API החדש לכולם. ממשקי ה-API החדשים האלה מוכנים עכשיו לשימוש, באופן ניסיוני או באופן מלא.
<main transition:animate="slide">
<p>Slide animation as you navigate to and from the page!</p>
</main>
<aside transition:name="my-aside">
<p>Animate and morph the matching "my-aside" element across pages automatically!</p>
</aside>
יתרון בלתי צפוי של התאמת Astro לממשקי ה-API של הפלטפורמה הוא היכולת להתנסות ביצירת תכונות חדשות על גבי ממשק ה-API המקורי של View Transitions. לדוגמה, ההנחיה החדשה של Astro transition:persist מאפשרת לכל רכיב להישאר במקום במהלך ניווט בדף מלא. כך אפשר להשתמש ברכיבים לטווח ארוך, כמו נגני אודיו ווידאו קבועים, דבר שהיה אפשרי בעבר רק ב-SPAs כבדים של JavaScript.
<video controls="" autoplay="" transition:persist>
<source src="https://ia804502.us.archive.org/33/items/GoldenGa1939_3/GoldenGa1939_3_512kb.mp4" type="video/mp4">
</video>
בנוסף, Astro יכול לשפר את הנוחות של התכונה 'מעברים בין תצוגות' למפתחים. לדוגמה, הצוות כבר הוסיף תמיכה באנימציות בהתאמה אישית של קדימה/לאחור ובאנימציות ל-HTML דינמי. קשה לבצע את שתי התכונות האלה באמצעות ממשקי ה-API ברמה נמוכה בלבד, אבל ב-Astro הן מתבצעות בקלות יחסית.
התכונות האלה זמינות כרגע רק ב-Astro, אבל צוות Astro מקווה להעביר את הניסיון שלו לכותבי המפרט ולקבוצות העבודה כדי לשפר את הדפדפן בעתיד. לדוגמה, אנחנו עוקבים מקרוב אחרי הצעה שתעזור לכם לשתף אנימציות ב-CSS בקלות רבה יותר.
מה השלבים הבאים?
העתיד של מעברים בין תצוגות באינטרנט ורוד. צוותים של Astro, Nuxt ו-HTMX הוסיפו תמיכה ברמה מסוימת, ועוד צוותים רבים הביעו עניין.
צוות Chrome שמח על התמיכה המובנית של Astro במעברי תצוגה. זהו צעד גדול בפיתוח האינטרנט, שמאפשר ליצור חוויות משתמש חלקות ודינמיות יותר. מפתחים, מומלץ לכם להכיר לעומק את התכונה 'מעבר בין תצוגות' ב-Astro 3.0. בין שאתם יוצרים דפי נחיתה חדשים ובין שאתם משדרגים אתרים קיימים, השיפורים האלה ישנו את כללי המשחק. התכונה 'מעבר בין תצוגות' עזרה למלא את הפער בין מה שאפשר לעשות באתרים מסוג SPA לבין מה שאפשר לעשות באתרים מסוג MPA. אנחנו ב-Chrome נשמח לשמוע מכם אם יש פערים נוספים בתמיכה ב-SPA ו/או ב-MPA. אפשר להוסיף תגובה במאגר GitHub של WICG בנושא View Transitions כדי להמשיך את הדיון בנושא.
כבר קיבלנו השראה מהדמואים והאפליקציות החדשניים שראינו, ואנחנו לא יכולים לחכות לראות עוד. העבודה שלכם עם מעברים בין תצוגות משפיעה על עתיד האינטרנט. נסו את התכונה 'מעבר בין תצוגות' ב-Astro, שתפו את העבודות שלכם ונמשיך את המסע הזה יחד.