در CSS Grid، ویژگیهای grid-template-columns
و grid-template-rows
به شما اجازه میدهند تا نام خطوط و اندازه ستونها و ردیفهای شبکه را تعیین کنید. پشتیبانی از درون یابی برای این ویژگیها به طرحبندیهای شبکه اجازه میدهد بهجای اینکه در نیمهی راه یک انیمیشن یا انتقال قرار بگیرند، به آرامی بین حالتها جابهجا شوند.
پشتیبانی مرورگر
- 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 نیز صدق می کند، جایی که مرورگر درون یابی ارزش را بین فریم های کلیدی انجام می دهد.
درون یابی 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
را تغییر می دهند.
بخشی از سری جدید قابلیت همکاری