تخطيطات الشبكة المتحركة بتنسيق CSS

في CSS Grid، تتيح لك السمتَان grid-template-columns وgrid-template-rows تحديد أسماء الأسطر وتتبُّع حجم أعمدة الشبكة وصفوفها، على التوالي. من خلال السماح بالتضمين لهذه السمات، يمكن لتصاميم الشبكة الانتقال بسلاسة بين الحالات، بدلاً من التوقف عند منتصف المؤثر الحركي أو الانتقال.

توافق المتصفّح

  • Chrome: 107
  • الحافة: 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.