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

ברשת CSS, המאפיינים 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

הודות לתורמים שלנו ב-Microsoft, Chrome – החל מגרסה 107 – יכול לשלב את הערכים 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.

חלק מהסדרה החדשה של יכולת פעולה הדדית