הצגת מעברים באפליקציות בדף יחיד

דפוס נפוץ בדפי אינטרנט הוא שימוש ב-JavaScript כדי להחליף באופן דינמי את התוכן בדף, בלי לטעון מסמך HTML חדש ומלא. זה נקרא אפליקציית דף יחיד (SPA). מעברים בין דפים מאפשרים לכם להציג רצף או הקשר בין הדפים ב-SPA.

מעברים בין דפים

כשמשתמש עובר לתצוגה חדשה ב-SPA, המסגרת מחליפה את ה-DOM בתוכן חדש. התוכן פשוט מופיע, אבל מה קורה אם רוצים ליצור מעבר בין התוכן הנוכחי לתוכן החדש?

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

כדי להשתמש במעברים בין תצוגות, צריך להוסיף את הלוגיקה לשינוי ה-DOM ב-callback. בדוגמאות האלה, יש לנו הטמעה בסיסית של נתב שסופקה על ידי רכיב אינטרנט שנקרא MyRouter. הדרך להפעלת מעברים בין תצוגות תלויה בנתב ובמסגרת שבהם אתם משתמשים.

document.startViewTransition(() => updateTheDOMSomehow());

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

מה קורה פה? כשמתקשרים אל document.startViewTransition(), הדפדפן מצלם תמונה של התצוגה הקודמת. לאחר מכן, הפונקציה קוראת לפונקציית הקריאה החוזרת שהעברתם, שמעדכנת את ה-DOM לתצוגה החדשה (אבל עדיין לא מציגה אותה). כשהפונקציה של הקריאה החוזרת מסתיימת, הדפדפן מתחיל את המעבר לתוכן החדש.

// Fallback for browsers that don't support this API:
if (!document.startViewTransition) {
  updateTheDOMSomehow();
  return;
} else {
  // With a View Transition:
  document.startViewTransition(() => updateTheDOMSomehow());
}

התאמה אישית של המעבר

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

אפשר לציין את האנימציה של המעבר ליציאה באמצעות ::view-transition-old() ואת האנימציה של המעבר לכניסה באמצעות ::view-transition-new(). אפשר גם לציין ערכים לשני המאפיינים באמצעות ::view-transition-group().

בדוגמה הזו, התצוגה הישנה תצא באמצעות המעבר slide-out-to-left והתצוגה החדשה תיכנס באמצעות המעבר slide-in-from-right. המשך של שניהם יהיה 200 אלפיות השנייה.

::view-transition-group(root){
  animation-duration: 200ms;
}

::view-transition-old(root) {
  animation-name: slide-out-to-left;
}

::view-transition-new(root) {
  animation-name: slide-in-from-right;
}

מעברים שונים בהתאם להקשר

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

אפשר לציין אנימציות שונות באמצעות מחלקת ה-pseudo‏ :active-view-transition-type().

html:active-view-transition-type(forwards) {
  &::view-transition-old(root) {
    animation-name: slide-out-to-left;
  }

  &::view-transition-new(root) {
    animation-name: slide-in-from-right;
  }
}

אחר כך תוכלו לבחור את סוג מעבר התצוגה שבו תרצו להשתמש כשמתקשרים אל document.startViewTransition().

const direction = next === 'home' ? 'backwards' : 'forwards';

document.startViewTransition({
  update: updateTheDOMSomehow,
  types: [direction],
});

מעבר בין רכיבים ספציפיים

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

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

קודם כול צריך לציין את הרכיבים שרוצים להחיל עליהם את המעבר, באמצעות המאפיין view-transition-name. כדי שהמעברים בין התצוגות יפעלו, צריך שיהיה בדיוק רכיב אחד לפני הקריאה ל-document.startViewTransition() ובדיוק רכיב אחד אחרי שהקריאה החוזרת ב-document.startViewTransition() מסתיימת.view-transition-name

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

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

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

כדי לעשות את זה בשם, צריך שיהיה view-transition-name ברכיב השם שיהיה ייחודי בתצוגה הישנה, משותף לרכיב השם בתצוגה החדשה וייחודי בתצוגה החדשה. זו בעיה, כי בדף הבית יש כמה כותרות ותמונות, ואי אפשר לדעת על מה המשתמש ילחץ.

יש שתי דרכים לפתור את הבעיה. אתם יכולים להוסיף view-transition-name ייחודי לכל פוסט בדף הבית, ואז להתאים את השם הזה לכל פוסט בדף המלא. אפשר ליצור אותם באמצעות מזהה הפוסט. אפשרות אחרת היא להשתמש בview-transition-name כללי, אבל להחיל אותו רק אחרי שהמשתמש לוחץ על פוסט ולפני הקריאה ל-document.startViewTransition().

עיצוב מעברים

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

בהתאם לאפקט שרוצים ליצור, יכול להיות שיהיה צורך גם לשנות את הרכיבים או את האנימציות. בדוגמה הקודמת, בוצעו שינויים בכמה סגנונות כדי ליצור את המעברים החלקים.

לכותרת יש את הכלל width: fit-content, שהוא סגנון שימושי כשמעבירים טקסט שלא מתבצע בו גלישת שורות (או שיש לו את אותה גלישת שורות בתצוגה הישנה והחדשה). אחרת, המעבר עשוי להיות בין רכיבים ברוחב שונה, והמעבר לא יהיה חלק.

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

מכבדים את prefers-reduced-motion

סיבה נפוצה לכך שמשתמשים מבקשים להפחית את התנועה היא שאנימציות במסך מלא, כמו אלה שאפשר ליצור באמצעות מעברים בין תצוגות, עלולות לגרום לאי נוחות לאנשים עם הפרעות תנועה וסטיבולריות. אפשר להשבית את האנימציות באמצעות שאילתת המדיה prefers-reduced-motion. אפשר גם לספק אנימציות חלופיות עדינות יותר, שעדיין מעבירות את המסר לגבי הקשר בין הרכיבים.

@media (prefers-reduced-motion) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

בדיקת ההבנה