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

Bramus

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

אינטרפולציה של ערכים ב-CSS

ב-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.