تخطيطات الشبكة المتحركة بتنسيق 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.