CSS Grid'de grid-template-columns
ve grid-template-rows
özellikleri, sırasıyla satır adlarını tanımlamanıza ve ızgara sütunlarının ve satırlarının boyutunu izlemenize olanak tanır. Bu özellikler için kesme noktasını desteklemek, ızgara düzenlerinin bir animasyonun veya geçişin yarı noktasında sabitlenmek yerine, durumlar arasında sorunsuz bir şekilde geçiş yapmasına olanak tanır.
Tarayıcı desteği
CSS'de Değer Enterpolasyonu
CSS'de transition
özelliğini kullanarak mülkleri bir değerden diğerine sorunsuz bir şekilde geçirebilirsiniz.
#target {
opacity: 0.5;
transition: opacity ease-in-out 0.25s;
}
#target:hover {
opacity: 1;
}
Oluşturma motoru, hedeflenen mülkün değerinin türünü otomatik olarak algılar ve yeni değere sorunsuz bir şekilde geçiş yapmak için bu bilgileri kullanır.
Örneğin:
opacity
'ü0
'ten1
'ye mi geçiriyorsunuz? Bu, sayısal bir enterpolasyondur.background-color
'üwhite
'tenblack
'ye mi geçiriyorsunuz? Kaynak ve hedef renkler arasında geçiş yapın.width
'e geçiş mi yapıyorsunuz? Gerekirse birim dönüştürerek sayısal olarak enterpolasyon yapın.
Aynı durum, tarayıcıda animasyon kareleri arasında değer enterpolasyonu yapılan CSS animasyonları için de geçerlidir.
grid-template-columns
ve grid-template-rows
için animasyon ekleme
Ayrıca, ızgara düzenleri bir animasyonun veya geçişin ortasında sabitlenmek yerine, durumlar arasında sorunsuz bir şekilde geçiş yapabilir.
Aşağıdaki demoda, çeşitli avatarların gösterildiği bir ızgara yer almaktadır. Alandan tasarruf etmek için her sütunun genişliği grid-template-columns
kullanılarak sınırlandırılarak avatarlar birbirinin üzerine yerleştirilir. Fareyle üzerine gelindiğinde her sütuna daha fazla yer verilir.
.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
özelliği uygulandığında ızgara, değerler arasında sorunsuz bir şekilde ara değer oluşturur.
Bu etki, grid-template-columns
veya grid-template-rows
değerlerini değiştiren animasyonlar için de geçerlidir.