עכשיו ב-Baseline: אנימציות של אפקטים לכניסה

Una Kravets

בפוסט ארבע תכונות חדשות של CSS עבור אפקטים של כניסה ויציאה, שיתפו כמה תכונות שימושיות שהגיעו לאחרונה ל-Chrome. שתי התכונות האלה, @starting-style, ו-transition-behavior: allow-discrete, הפכו ל-Baseline Newly Available (זמינות חדשה) במהדורת Firefox 129. עכשיו אפשר ליצור אפקטים של אנימציית כניסה עבור רכיבים, כולל אנימציה מ-display: none ואנימציה בשכבה העליונה.

הגדרת האפקטים של הכניסה באמצעות @starting-style

הכלל @starting-style מגדיר את הסגנונות הראשוניים ברכיב לפני העיבוד שלו בדף. הדרישה הזו נדרשת עבור רכיבים שיש בהם אנימציה מ-display: none, כי הם צריכים מצב שממנו אפשר ליצור אנימציה.

שימוש ב-@starting-style כמו בכל כלל גורף אחר ב-CSS, על ידי הצבת סגנונות הרכיב בו. לדוגמה, באמצעות <dialog>, מציבים את הסגנונות של dialog[open] בתוך כלל @starting-style. אלה הסגנונות שבהם נעשה שימוש לפני שתיבת הדו-שיח נפתחת.

@starting-style {
  dialog[open] {
    /*   Styles before the dialog opens   */
  }
}

הפעלת אנימציות נפרדות באמצעות allow-discrete

הדבר השני שנדרש כדי לתמוך באנימציות כניסה עבור רכיבים מונפשים מ-display: none, כמו תיבות דו-שיח וחלונות קופצים, הוא להפעיל מצב אנימציה חדש, כדי לתמוך באנימציה של מאפיינים נפרדים. מאפיינים בדידים הם מאפיינים שלא יכולים לבצע אינטרפולציה בין ערכים. אפשר לחשוב עליהם כעל מתג הפעלה/כיבוי. לדוגמה: display, visibility, mix-blend-mode – כל מאפיין שבו התכונה היא ערך אחד או אחר. במצב האנימציה החדש הזה, הדפדפן תומך עכשיו בהחלפת ערכים בנקודת ה-50% במקום בנקודת ה-0% של המעבר.

אפשר להוסיף אנימציה לאפקטים של הכניסה ברכיבים display: none ו-visibility: hidden באחת משתי הדרכים הבאות:

• הנכס העצמאי transition-behavior עם הערך allow-discrete.
• הערך allow-discrete בקיצור המעבר שלך.

אנחנו ממליצים על השיטה השנייה, כי החלה של transition-behavior כלולה בקיצור של transition. אם מחילים את ה-transition-behavior: allow-discrete לפני קיצור הדרך של המעבר שבו מחילים את פונקציות המעבר, התזמון וההתאמה, הדפדפן יתעלם מהtransition-behavior.

אם משתמשים בפונקציה הזו בקיצור, צריך להחיל את מילת המפתח allow-discrete רק על המאפיינים הספציפיים שדורשים אנימציות נפרדות. אפשר לראות את זה בשירות ה-CSS הבא, שמעביר גם את הנכס translate וגם את הנכס display, אבל מחיל את מילת המפתח allow-discrete רק על הנכס display.

transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

הדגמה: סיכום של כל המידע

השימוש בתכונות האלה שימושי במיוחד לאלמנטים בשכבה העליונה, כמו הרכיב <dialog> או רכיבים שמשתמשים במאפיין popover. בדוגמה הבאה, הרכיב <dialog> מונפש מהחלק התחתון של אזור התצוגה (מתחיל בתרגום אנכי של 100 וולט מחוץ למסך), ונמצא במרכז אזור התצוגה, ומסיר את התרגום כשה<dialog> פתוח.

/* Before the dialog opens */
@starting-style {
  dialog[open] {
  translate: 0 100vh;
  }
}

/* Dialog is-open state */
dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}

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

dialog[open] {
  translate: 0 0;
  transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;

  @starting-style {
    translate: 0 100vh;
  }
}

סיכום

זה מרגש לראות התקדמות כזו ב-Baseline, ולכל הפחות, זה שיפור מתקדם נחמד של הרכיבים האלה. ללא התכונות של אפקט הכניסה, הרכיבים מונפשים לשכבה העליונה או מסגנון display: none פשוט יופיעו בדף ללא מעבר, כפי שהם מופיעים היום.

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

• @starting-style ב-MDN
• התנהגות המעבר ב-MDN