طرح بندی شبکه متحرک CSS

در CSS Grid، ویژگی‌های grid-template-columns و grid-template-rows به شما اجازه می‌دهند تا نام خطوط و اندازه ستون‌ها و ردیف‌های شبکه را تعیین کنید. پشتیبانی از درون یابی برای این ویژگی‌ها به طرح‌بندی‌های شبکه اجازه می‌دهد به‌جای اینکه در نیمه‌ی راه یک انیمیشن یا انتقال قرار بگیرند، به آرامی بین حالت‌ها جابه‌جا شوند.

Bramus

درون یابی ارزش در 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

با تشکر از مشارکت‌کنندگان ما در مایکروسافت، 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 را تغییر می دهند.

بخشی از سری جدید قابلیت همکاری