הפודקאסט של CSS – 044: מעברים
כשמבצעים אינטראקציה עם אתר, לפעמים רואים שלרכיבים רבים יש state. לדוגמה, תפריטים נפתחים יכולים להיות במצב פתוח או סגור. צבע הלחצנים עשוי להשתנות כשהם מתמקדים או מעבירים את העכבר מעליה. מודים מופיעים ונעלמים.
כברירת מחדל, CSS מעביר את הסגנון של מצבים אלה באופן מיידי.
באמצעות מעברי CSS, אנחנו יכולים לבצע אינטרפולציה בין המצב הראשוני לבין מצב היעד של הרכיב. המעבר בין השניים משפר את חוויית המשתמש באמצעות כיוון חזותי, תמיכה ורמזים לגבי הסיבה לאינטראקציה.
נכסי מעבר
כדי להשתמש במעברים ב-CSS, אפשר להשתמש בנכסי המעבר השונים או במאפיין הקיצור transition
.
נכס מעבר
המאפיין transition-property
מציין אילו סגנונות להעביר.
.my-element {
transition-property: background-color;
}
השדה transition-property
מקבל שם אחד או יותר של מאפייני CSS ברשימה שמופרדת בפסיקים.
לחלופין, ניתן להשתמש ב-transition-property: all
כדי לציין שצריך להעביר כל מאפיין.
משך מעבר
המאפיין transition-duration
משמש להגדרת משך הזמן להשלמת המעבר.
transition-duration
מקבל יחידות זמן, בשניות (s
) או באלפיות השנייה (ms
) וברירת המחדל היא 0s
.
פונקציית תזמון-מעבר
אפשר להשתמש בנכס transition-timing-function
כדי לשנות את מהירות המעבר ב-CSS במהלך transition-duration
.
כברירת מחדל, CSS מעביר את הרכיבים שלך במהירות קבועה (transition-timing-function: linear
). עם זאת, מעברים לינאריים עשויים להיראות קצת מלאכותיים: בחיים האמיתיים, לאובייקטים יש משקל והם לא יכולים לעצור ולהתחיל לפעול מיד. היכולת להתחיל את המעבר בקלות או לצאת ממנו יכולה להפוך את המעברים האלה לחיים וטבעיים יותר.
המודול שלנו להנפשת CSS כולל סקירה כללית טובה של פונקציות התזמון.
אתם יכולים להשתמש בDevTools כדי להתנסות בפונקציות תזמון שונות בזמן אמת.
השהיה-מעבר
אפשר להשתמש במאפיין transition-delay
כדי לציין את השעה שבה המעבר יתחיל. אם לא מציינים transition-duration
, המעברים יתחילו באופן מיידי מפני שערך ברירת המחדל הוא 0s
. המאפיין הזה מקבל יחידת זמן, למשל שניות (s
) או אלפיות שנייה (ms
).
המאפיין הזה שימושי ליצירת מעברים מדורגים, המושגים על-ידי הגדרת ערך transition-delay
ארוך יותר לכל רכיב עוקב בקבוצה.
האפשרות transition-delay
שימושית גם לניפוי באגים. הגדרת העיכוב לערך שלילי יכולה להתחיל מעבר לשלב נוסף בציר הזמן.
מקוצר: מעבר
כמו רוב מאפייני ה-CSS, קיימת גרסה מקוצרת. transition
משלב את transition-property
, transition-duration
, transition-timing-function
ו-transition-delay
.
.longhand {
transition-property: transform;
transition-duration: 300ms;
transition-timing-function: ease-in-out;
transition-delay: 0s;
}
.shorthand {
transition: transform 300ms ease-in-out 0s;
}
מה אי אפשר להעביר?
בעת כתיבת CSS, ניתן לציין באילו מאפיינים לכלול מעברים מונפשים. כדאי לעיין ברשימת MDN הזו של מאפייני CSS שמתאימים לאנימציה.
באופן כללי, ניתן להעביר רק רכיבים שיש להם 'מצב ביניים' בין מצב ההתחלה למצב הסופי. לדוגמה, לא ניתן להוסיף מעברים עבור font-family
, כי לא ברור איך צריך להיראות 'המצב האמצעי' בין serif
ל-monospace
. מצד שני, אפשר להוסיף מעברים ל-font-size
כי היחידה שלה היא אורך שאפשר לקבוע ביניהם.
ריכזנו כאן כמה נכסים נפוצים שאפשר להעביר.
טרנספורמציה
נכס ה-CSS transform
מועבר בדרך כלל, כי זהו נכס עם האצה של ה-GPU, ולכן נוצרת אנימציה חלקה יותר וגם צריכת הסוללה נמוכה יותר. בעזרת התכונה הזו ניתן לשנות גודל, לסובב, לתרגם או להטות רכיב באופן שרירותי.
עיינו בקטע על טרנספורמציות במודול הפונקציות שלנו.
צבע
לפני, במהלך ואחרי האינטראקציה, צבע יכול להיות אינדיקציה מצוינת למצב. לדוגמה, אם מעבירים את העכבר מעל ללחצן, צבעו עשוי להשתנות. השינוי בצבע הזה יכול לספק למשתמש משוב על כך שניתן ללחוץ על הלחצן.
המאפיינים color
, background-color
ו-border-color
הם רק מקומות ספורים שבהם אפשר להעביר את הצבע במהלך האינטראקציה.
כדאי לעיין במודול שלנו על צבע.
אזורים כהים
האזורים הכהים מועברים בדרך כלל כדי לציין שינוי בגובה, למשל מהתמקדות המשתמש.
כדאי לכם לנסות את המודול שלנו על צלליות.
מסננים
filter
הוא מאפיין CSS מתקדם שמאפשר להוסיף אפקטים גרפיים תוך כדי תנועה. מעבר בין מצבים שונים של filter
יכול להניב תוצאות מרשימות למדי.
כדאי לעיין במודול שלנו על מסננים.
טריגרים למעבר
שירות ה-CSS חייב לכלול שינוי מצב וגם אירוע שמפעיל את השינוי הזה במצב שבו המעברים בין שירותי CSS מופעלים. דוגמה אופיינית לטריגר כזה היא המחלקה הפסאודו-מחלקה של :hover
. פסאודו-מחלקה זו מתאימה כאשר המשתמש מעביר את סמן העכבר מעל רכיב מסוים.
ריכזנו כאן רשימה של אירועים ופסאודו מחלקות שיכולים לגרום לשינויי מצב ברכיבים שלכם.
:hover
: תואם אם הסמן נמצא מעל לרכיב.:focus
: התאמה אם הרכיב נמצא במוקד.:focus-within
: התאמה אם הרכיב או הצאצאים שלו מתמקדים.:target
: תואם כאשר הקטע של כתובת ה-URL הנוכחית תואם למזהה הרכיב.:active
: התאמה למועד שבו הרכיב מופעל (בדרך כלל כשלוחצים עליו על העכבר).class
שינוי מ-JavaScript: כאשר CSS של רכיב מסויםclass
משתנה באמצעות JavaScript, ה-CSS יעביר מאפיינים מתאימים שהשתנו.
מעברים שונים לכניסה וליציאה
הגדרת מאפיינים שונים של transition
בהעברת העכבר או במיקוד מאפשרת ליצור כמה אפקטים מעניינים.
.my-element {
background: red;
/* This transition is applied on the "exit" transition */
transition: background 2000ms ease-in;
}
.my-element:hover {
background: blue;
/* This transition is applied on the "enter" transition */
transition: background 150ms ease;
}
שיקולי נגישות
מעברים בין שירותי CSS לא מתאימים לכל אחד. עבור חלק מהאנשים, מעברים ואנימציות יכולים לגרום לבחילה בתנועה או לאי-נוחות. למרבה המזל, ל-CSS יש תכונת מדיה בשם prefers-reduced-motion
שמזהה אם משתמש ציין העדפה לפחות תנועה מהמכשיר.
/*
If the user has expressed their preference for
reduced motion, then don't use transitions.
*/
@media (prefers-reduced-motion: reduce) {
.my-element {
transition: none;
}
}
/*
If the browser understands the media query and the user
explicitly hasn't set a preference, then use transitions.
*/
@media (prefers-reduced-motion: no-preference) {
.my-element {
transition: transform 250ms ease;
}
}
כדאי לקרוא את הפוסט בבלוג prefers-reduced-motion: לפעמים פחות תנועה היא יותר כדי לקבל מידע נוסף על תכונת המדיה הזו.
שיקולי ביצועים
כשעובדים עם מעברים ב-CSS, ייתכן שתיתקלו בבעיות בביצועים אם תוסיפו מעברים בנכסי CSS מסוימים. לדוגמה, כשמאפיינים כמו width
או height
משתנים, הם מבצעים דחיפה של תוכן בשאר הדף. פעולה זו מאלצת את ה-CSS לחשב מיקומים חדשים לכל רכיב המושפע בכל פריים של המעבר. במידת האפשר, מומלץ להשתמש במקום זאת בנכסים כמו transform
ו-opacity
.
מומלץ לעיין במדריך לאנימציות CSS בעלות ביצועים גבוהים כדי להתעמק בנושא הזה.
בדיקת ההבנה
בחינת הידע שלך לגבי מעברים
באיזה מאפיין מעבר ניתן לציין התאמה?
transition-duration
transition-easing
transition-cubic-bezier
transition-timing-function
animation-ease
שיטה מומלצת היא להשתמש בtransition-property: all
all
עלול לגרום לבעיות בביצועים ולמעברים לא מכוונים.אפשר להעביר את כל הנכסים.
font-family
.