Di CSS Grid, properti grid-template-columns
dan grid-template-rows
memungkinkan Anda menentukan nama baris dan melacak ukuran kolom dan baris petak. Mendukung interpolasi untuk properti ini memungkinkan tata letak petak melakukan transisi antar-status dengan lancar, bukan snap di titik tengah animasi atau transisi.
Dukungan Browser
Interpolasi Nilai di CSS
Di CSS, Anda dapat melakukan transisi properti dengan lancar dari satu nilai ke nilai lainnya menggunakan properti transition
.
#target {
opacity: 0.5;
transition: opacity ease-in-out 0.25s;
}
#target:hover {
opacity: 1;
}
Mesin rendering akan otomatis mendeteksi jenis nilai properti yang ditargetkan, dan menggunakan informasi tersebut untuk bertransisi dengan lancar ke nilai baru.
Contoh:
- Mentransisikan
opacity
dari0
ke1
? Itu adalah interpolasi numerik. - Bertransisi
background-color
dariwhite
keblack
? Pudarkan antara warna sumber dan target. - Melakukan transisi
width
? Lakukan interpolasi secara numerik, dengan mengonversi unit di sepanjang jalan jika diperlukan.
Hal yang sama berlaku untuk animasi CSS, di mana browser akan melakukan interpolasi nilai di antara keyframe.
Menganimasikan grid-template-columns
dan grid-template-rows
Tata letak petak juga dapat melakukan transisi antar-status dengan lancar, bukan snap di titik tengah animasi atau transisi.
Dalam demo berikut, petak menampilkan beberapa avatar. Untuk menghemat ruang, avatar ditata di atas satu sama lain dengan membatasi lebar setiap kolom menggunakan grid-template-columns
. Saat diarahkan kursor, setiap kolom akan diberi lebih banyak ruang.
.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);
}
Dengan properti transition
yang diterapkan, petak akan berinterpolasi antarnilai dengan lancar.
Efek ini juga berlaku untuk animasi yang mengubah nilai grid-template-columns
atau grid-template-rows
.