Saya senang menyoroti fakta bahwa CSS grid-template-rows dan grid-template-columns properti adalah sekarang dapat dianimasikan di semua browser web utama! Nah, CSS Grid secara teknis telah mendukung animasi sejak lama dipanggang langsung ke dalam spesifikasi CSS Grid Layout Module Level 1.

Tetapi menganimasikan properti grid ini baru saja didukung oleh ketiga browser utama. Mari kita lihat beberapa contoh untuk membuat jus kreatif mengalir?

Contoh 1: Memperluas sidebar

Pertama-tama, inilah yang sedang kita bicarakan:

Kisi dua kolom sederhana. Sekarang, sebelumnya, Anda mungkin tidak telah membuat ini menggunakan CSS Grid karena animasi dan transisi tidak didukung, tetapi bagaimana jika Anda ingin kolom kiri — mungkin navigasi sidebar — untuk diperluas saat melayang? Nah, sekarang itu mungkin.

Saya tahu apa yang Anda pikirkan: “Menganimasi properti CSS? Mudah sekali, saya sudah melakukannya selama bertahun-tahun!” Saya juga. Namun, saya mengalami halangan yang menarik saat bereksperimen dengan kasus penggunaan tertentu.

Jadi, kami ingin mentransisikan grid itu sendiri (khususnya grid-template-columns, yang diatur pada .grid kelas dalam contoh). Tetapi kolom kiri (.left) adalah pemilih yang membutuhkan :hover kelas semu. Meskipun JavaScript dapat memecahkan teka-teki ini dengan mudah — terima kasih, tetapi tidak, terima kasih — kami dapat menyelesaikannya dengan CSS saja.

Mari kita telusuri semuanya, dimulai dengan HTML. Hal-hal yang cukup standar benar-benar… kisi dengan dua kolom.

<div class="grid"> <div class="left"></div> <div class="right"></div>
</div>

Mengesampingkan CSS kosmetik, Anda harus mengaturnya terlebih dahulu display: grid pada wadah induk (.grid).

.grid { display: grid;
}

Selanjutnya, kita dapat menentukan dan mengukur dua kolom menggunakan grid-template-columns Properti. Kita akan membuat kolom kiri menjadi super sempit, dan kemudian menambah lebarnya saat melayang. Kolom kanan mengambil sisa ruang yang tersisa, berkat auto kata kunci.

.grid { display: grid; grid-template-columns: 48px auto;
}

Kita tahu kita akan menganimasikan benda ini, jadi mari lanjutkan dan lempar a transition di sana sementara kita melakukannya sehingga perubahan antar status halus dan terlihat.

.grid { display: grid; grid-template-columns: 48px auto; transition: 300ms; /* Change as needed */
}

Itu saja untuk .grid! Yang tersisa hanyalah menerapkan status hover. Secara khusus, kita akan menimpa grid-template-columns properti sehingga kolom kiri mengambil lebih banyak ruang saat melayang.

Ini saja tidak terlalu menarik, meskipun mengagumkan bahwa animasi dan transisi didukung sekarang di CSS Grid. Yang lebih menarik adalah kita bisa menggunakan yang relatif baru :has() kelas semu untuk menata wadah induk (.grid) sedangkan anak (.left) dilayangkan.

.grid:has(.left:hover) { /* Hover styles */
}

Dalam bahasa Inggris sederhana ini mengatakan, “Lakukan sesuatu pada .grid wadah jika mengandung elemen bernama .left di dalamnya yang dalam keadaan melayang.” Itulah mengapa :has() sering disebut sebagai pemilih "induk". Kami akhirnya dapat memilih induk berdasarkan anak-anak yang dikandungnya — tidak diperlukan JavaScript!

Jadi, mari kita tambah lebarnya .left kolom ke 30% saat di-hover. Itu .right kolom akan terus mengambil semua ruang yang tersisa:

.grid { display: grid; transition: 300ms; grid-template-columns: 48px auto;
} .grid:has(.left:hover) { grid-template-columns: 30% auto;
}

Kami juga dapat menggunakan variabel CSS, yang mungkin terlihat lebih bersih atau tidak tergantung pada preferensi pribadi Anda (atau Anda mungkin tetap menggunakan variabel CSS dalam proyek Anda):

.grid { display: grid; transition: 300ms; grid-template-columns: var(--left, 48px) auto;
} .grid:has(.left:hover) { --left: 30%;
}

I cinta bahwa kisi-kisi CSS dapat dianimasikan sekarang, tetapi fakta bahwa kita dapat membuat contoh khusus ini hanya dengan sembilan baris CSS bahkan lebih mencengangkan.

Ini contoh lain dari Olivia Ng — konsep serupa, tetapi dengan konten (klik ikon nav):

Contoh 2: Memperluas Panel

Contoh ini mentransisikan wadah kisi (lebar kolom) tetapi juga masing-masing kolom (warna latar belakangnya). Ini ideal untuk menyediakan lebih banyak konten saat melayang.

Perlu diingat bahwa repeat() fungsi terkadang menghasilkan transisi buggy, itulah sebabnya saya mengatur lebar setiap kolom satu per satu (mis grid-template-columns: 1fr 1fr 1fr).

Contoh 3: Menambahkan Baris dan Kolom

Contoh ini secara animasi "menambahkan" kolom ke kisi. Namun - Anda dapat menebaknya - skenario ini juga memiliki jebakan. Persyaratannya adalah bahwa kolom "baru" tidak boleh disembunyikan (yaitu disetel ke display: none), dan CSS Grid harus mengetahui keberadaannya sambil menyetel lebarnya ke 0fr.

Jadi, untuk kisi tiga kolom — grid-template-columns: 1fr 1fr 0fr (ya, satuannya harus dideklarasikan padahal nilainya 0!) transisi ke grid-template-columns: 1fr 1fr 1fr dengan benar, tapi grid-template-columns: 1fr 1fr tidak. Kalau dipikir-pikir, ini sebenarnya masuk akal mengingat apa yang kita ketahui bagaimana transisi bekerja.

Ini contoh lain dari Michelle Barker — konsep yang sama, tetapi dengan kolom tambahan dan banyak lebih pizzazz. Pastikan untuk menjalankan yang ini dalam mode layar penuh karena sebenarnya responsif (tidak ada tipu daya, hanya desain yang bagus!).

Beberapa contoh lagi

Karena kenapa tidak?

"Animated Mondrian" ini adalah bukti asli dari konsep grid CSS animasi oleh Pengembang Chrome. itu grid-rowdan grid-columnmemanfaatkan span kata kunci untuk membuat tata letak yang Anda lihat sebelum Anda, lalu grid-template-rowdan grid-template-columndianimasikan menggunakan animasi CSS. Ini sama sekali tidak serumit kelihatannya!

Konsep yang sama, tetapi dengan lebih dari pizzazz Michelle Barker. Bisakah membuat pemintal pemuatan yang bagus?

Diakhiri dengan sedikit nostalgia (menunjukkan usia saya di sini), kisi CSS animasi yang tidak terlalu kotor Andrew Harvard. Sekali lagi — konsep yang sama — hanya saja Anda tidak dapat melihat item kisi lainnya. Tapi jangan khawatir, mereka ada di sana.

• Konten Bertenaga SEO & Distribusi PR. Dapatkan Amplifikasi Hari Ini.
• Platoblockchain. Intelijen Metaverse Web3. Pengetahuan Diperkuat. Akses Di Sini.
• Sumber: https://css-tricks.com/animating-css-grid-how-to-examples/