در 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
را تغییر می دهند.