מעברים

הפודקאסט של 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 בעלות ביצועים גבוהים כדי להתעמק בנושא הזה.

בדיקת ההבנה

בחינת הידע שלך לגבי מעברים