בפוסט ארבע תכונות חדשות של 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 לאנימציות כניסה ויציאה חלקה". למידע נוסף על התכונות האלה, אפשר לעיין במשאבי התיעוד הבאים: