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