Animasi CSS Grid (Cara Contoh)

CSS Grid's

dan Properties kini boleh didapati untuk animasi dalam semua pelayar utama! Malah, grid CSS telah lama menyokong animasi kerana ia dibina ke dalam spesifikasi modul susun atur CSS Grid Tahap 1. grid-template-rows grid-template-columns Tetapi sehingga baru -baru ini, ketiga -tiga pelayar utama menyokong sepenuhnya animasi sifat mesh ini. Mari lihat beberapa contoh untuk memberi inspirasi kepada kreativiti anda!

katalog

katalog

• Contoh 1: Kembangkan bar sisi
• Contoh 2: Kembangkan panel
• Contoh 3: Tambah baris dan lajur
• lebih banyak contoh
Contoh 1: Kembangkan bar sisi

Pertama sekali, inilah yang akan kita bincangkan:

grid dua lajur mudah. Sebelum ini, anda mungkin tidak akan membinanya dengan grid CSS kerana animasi dan peralihan tidak disokong, tetapi bagaimana jika anda mahu lajur kiri (mungkin navigasi sidebar) untuk berkembang pada hover? Sekarang, ini mungkin.

Saya tahu apa yang anda fikirkan: "Atribut CSS Animasi? Sekeping kek, saya telah melakukannya selama bertahun -tahun!" Walau bagaimanapun, saya menghadapi halangan yang menarik apabila mencuba kes penggunaan tertentu.

jadi kami mahu menukar mesh itu sendiri (terutamanya

ditetapkan pada kelas

dalam contoh). Tetapi lajur kiri () adalah pemilih yang memerlukan kelas pseudo .grid. Walaupun JavaScript dapat menyelesaikan masalah ini dengan mudah - terima kasih, tidak perlu - kita boleh melaksanakannya dengan hanya CSS. grid-template-columns .left mari kita jelaskan keseluruhan proses langkah demi langkah, bermula dengan HTML. Ia sebenarnya sangat standard ... grid dengan dua lajur. :hover

Decorative CSS diketepikan, anda perlu menetapkan

pada bekas induk (

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

).

.grid display: grid Seterusnya, kita boleh menggunakan atribut

untuk menentukan dan mengubah saiz kedua lajur. Kami menetapkan lajur kiri sangat sempit dan kemudian meningkatkan lebarnya apabila melayang. Lajur di sebelah kanan akan mengambil seluruh ruang, terima kasih kepada kata kunci

.grid {
  display: grid;
}

.

grid-template-columns auto kita tahu kita mahu menghidupkannya, jadi mari kita tambahkan kesan peralihan sambil menambah animasi supaya perubahan antara negeri akan lancar dan jelas.

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

sudah selesai! Selebihnya ialah keadaan hover aplikasi. Khususnya, kami akan menimpa harta

.grid {
  display: grid;
  grid-template-columns: 48px auto;
  transition: 300ms; /* 根据需要更改 */
}

supaya lajur kiri mengambil lebih banyak ruang apabila melayang.

.grid Ini sahaja tidak begitu menyeronokkan, walaupun grid CSS kini menyokong animasi dan peralihan. Apa yang lebih menarik ialah kita boleh menggunakan kelas pseudo yang agak baru untuk menggayakan bekas induk (grid-template-columns) apabila elemen kanak-kanak (

) dilegakan.

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

Dalam bahasa Inggeris yang mudah, ini bermakna: "Jika bekas .grid mengandungi elemen yang dinamakan .left dan elemennya melayang, kemudian lakukan beberapa operasi pada bekas .grid. Kami akhirnya boleh memilih elemen induk berdasarkan unsur -unsur kanak -kanak yang terkandung - tiada JavaScript diperlukan! :has()

Jadi mari kita tingkatkan lebar lajur

hingga 30% apabila melayang. Lajur .left akan terus menduduki semua ruang yang tinggal: .right

.grid {
  display: grid;
}

Kami juga boleh menggunakan pembolehubah CSS, yang mungkin atau mungkin tidak kelihatan ringkas, bergantung pada keutamaan peribadi anda (atau anda mungkin menggunakan pembolehubah CSS dalam projek anda):

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

Saya sangat menyukai grid CSS kini boleh membuat animasi, tetapi hakikat bahawa kita boleh membina contoh khusus ini dengan hanya sembilan baris kod CSS bahkan lebih menakjubkan.

Ini adalah satu lagi contoh Olivia ng -konsep yang serupa, tetapi mengandungi kandungan (klik pada ikon navigasi):

Contoh 2: Kembangkan panel

Contoh ini menukarkan bekas grid (lebar lajur) dan juga menukarkan lajur individu (warna latar belakang mereka). Ia sesuai untuk menyediakan lebih banyak kandungan pada hover.

Perlu diingat bahawa fungsi

kadang -kadang menghasilkan peralihan yang salah, itulah sebabnya saya menetapkan lebar setiap lajur secara berasingan (iaitu repeat()). grid-template-columns: 1fr 1fr 1fr

Contoh 3: Tambah baris dan lajur

Contoh ini menghidupkan lajur ke grid. Tetapi -anda meneka -ada juga perangkap untuk keadaan ini. Keperluannya ialah lajur "baru" tidak boleh disembunyikan (iaitu ditetapkan ke

) dan bahawa grid CSS mesti mengakui kewujudannya apabila ia menetapkan lebarnya kepada 0FR. display: none

Jadi untuk grid tiga lajur -

(ya, unit mesti diisytiharkan walaupun nilai itu 0!) Akan ditukar dengan betul ke grid-template-columns: 1fr 1fr 0fr, tetapi grid-template-columns: 1fr 1fr 1fr tidak akan. Di belakang, ini sebenarnya benar -benar munasabah memandangkan pemahaman kita tentang bagaimana peralihan berfungsi. grid-template-columns: 1fr 1fr

Ini adalah satu lagi contoh Michelle Barker -konsep yang sama, tetapi dengan lajur dan kesan yang lebih sejuk. Pastikan untuk menjalankan contoh ini dalam mod skrin penuh, kerana ia sebenarnya responsif (tiada helah, hanya reka bentuk yang baik!).

lebih banyak contoh

mengapa tidak?

"Mondrian animasi" ini adalah bukti awal konsep untuk grid CSS animasi yang dihasilkan oleh Chrome Devrel.

dan grid-row gunakan kata kunci grid-column untuk membuat susun atur yang anda lihat sebelum anda, dan kemudian gunakan animasi CSS untuk menghidupkan span dan grid-template-row. Ia tidak begitu rumit kerana ia kelihatan! grid-template-column

Konsep yang sama, tetapi lebih banyak kesan sejuk Michelle Barker. Bolehkah anda membuat pemutar pemuatan yang baik?

Akhirnya mengkaji nostalgia (saya berumur di sini), Andrew Harvard membuat grid CSS animasi yang tidak seperti grid. Sama - konsep yang sama - anda tidak dapat melihat item grid lain. Tetapi jangan risau, mereka ada di sana.

Atas ialah kandungan terperinci Animasi CSS Grid (Cara Contoh). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!