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

Bramus

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

Browser Support

• 107
• 107
• 66
• 16

אינטרפולציה של ערכים ב-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, שבהן הדפדפן יבצע אינטרפולציה של ערכים בין פריימים מרכזיים.

הערה: כשמשתמשים במאפיינים מותאמים אישית, צריך להשתמש ב-@property כדי לציין את הסוג שלהם. כך הדפדפן יודע איך לעבור מערך אחד לאחר.

הנפשה של 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.