אנימציה של תצוגות מודאליות

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

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

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

שכבת-העל של החלון צריכה להיות מיושרת לאזור התצוגה, לכן יש להגדיר את position שלה ל-fixed:

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  pointer-events: none;
  opacity: 0;

  will-change: transform, opacity;
}

ערך opacity הראשוני הוא 0, כך שהוא מוסתר מהתצוגה, אבל גם צריך להגדיר את pointer-events לערך none כדי שקליקים ונגיעות יעברו. אחרת, הוא יחסום את כל האינטראקציות ויגרום לדף כולו להגיב. לסיום, בגלל שהאנימציה opacity ו-transform מכילה אנימציה, יש לסמן אותם כמשתנים באמצעות will-change (למידע נוסף, יש לעיין גם בשימוש במאפיין השינוי).

כשהתצוגה גלויה, היא צריכה לקבל אינטראקציות ולקבל opacity של 1:

.modal.visible {
  pointer-events: auto;
  opacity: 1;
}

עכשיו, אם יש צורך בתצוגה מודאלית, אפשר להשתמש ב-JavaScript כדי להחליף את מצב המחלקה "visible":

modal.classList.add('visible');

בשלב הזה התצוגה המודאלית מופיעה ללא אנימציה, כך שעכשיו תוכלו להוסיף אותה ב-(ראו גם התאמה אישית של הקלות):

.modal {
  transform: scale(1.15);

  transition:
    transform 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.1s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

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

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

.modal.visible {
  transform: scale(1);

  transition:
    transform 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946),
    opacity 0.3s cubic-bezier(0.465, 0.183, 0.153, 0.946);
}

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