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

Bramus

في 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.