פריסות רשת עם אנימציה של שירות ה-CSS

ב-CSS Grid, המאפיינים grid-template-columns ו-grid-template-rows מאפשרים להגדיר שמות של שורות ולעקוב אחרי הגודל של עמודות ושורות של רשת, בהתאמה. התמיכה באינטרפולציה לנכסים האלה מאפשרת למערך התמונות לעבור בצורה חלקה בין מצבים, במקום להצמיד את התמונות בנקודת הביניים של אנימציה או של מעבר.

תמיכה בדפדפן

  • Chrome:‏ 107.
  • Edge:‏ 107.
  • Firefox: 66.
  • Safari: 16.

ב-CSS אפשר להעביר מאפיינים מערך אחד לערך אחר בצורה חלקה באמצעות המאפיין transition.

#target {
  opacity: 0.5;
  transition: opacity ease-in-out 0.25s;
}

#target:hover {
  opacity: 1;
}

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

לדוגמה:

  • האם אתם מעבירים את opacity מ-0 אל 1? זוהי אינטרפולציה מספרית.
  • האם אתם מעבירים את background-color מ-white אל black? מעבר הדרגתי בין צבעי המקור ליעד.
  • מעבירים את width? מבצעים אינטרפולציה מספרית, וממירים יחידות לאורך הדרך, לפי הצורך.

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

אנימציה של grid-template-columns ו-grid-template-rows

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

בדמו הבא מוצגים כמה סמלי 'אני' בתוך רשת. כדי לחסוך מקום, התמונות האלה מוצגות אחת מעל השנייה, על ידי הגבלת רוחב כל עמודה באמצעות grid-template-columns. כשמציבים את סמן העכבר מעל לכל עמודה, מוצג שטח גדול יותר.

.avatars {
  display: grid;
  gap: 0.35em;

  grid-auto-flow: column;
  grid-template-columns: repeat(4, 2em);
  transition: all ease-in-out 0.25s;
}

.avatars:hover {
  grid-template-columns: repeat(4, 4em);
}

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

האפקט חל גם על אנימציות שמשנות את הערכים של grid-template-columns או grid-template-rows.