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