Bolehkah Anda Menggunakan Peralihan CSS dengan Reka Letak Grid CSS?

Menggunakan Transisi CSS dengan Reka Letak Grid CSS

Walaupun penegasan spesifikasi bahawa peralihan harus berfungsi dengan lajur-templat-grid dan templat-grid- rows, anda telah mendapati bahawa ini tidak berlaku dalam amalan. Ini kerana pelaksanaan susun atur grid dalam penyemak imbas utama masih dalam pembangunan.

Menurut spesifikasi Tata Letak Grid CSS, peralihan seharusnya berfungsi pada sifat berkaitan grid, asalkan satu-satunya perubahan adalah pada nilainya dan struktur peraturan tetap utuh. Walau bagaimanapun, seperti yang anda perhatikan, peralihan pada sifat susun atur grid tidak disokong oleh mana-mana penyemak imbas utama pada masa ini.

Kemas kini

Baru-baru ini, Firefox telah melaksanakan sokongan untuk peralihan pada Ciri susun atur grid CSS. Walau bagaimanapun, ciri ini masih dalam pembangunan dan belum lagi tersedia dalam penyemak imbas arus perdana yang lain.

Penyelesaian Sementara

Anda boleh menggunakan animasi @keyframes bersama-sama dengan animasi peralihan ke mencipta kesan peralihan. Berikut ialah contoh:

.myElement {
  transition: all 1s;
  animation: myAnimation 1s ease-in;
}

@keyframes myAnimation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100px);
  }
}

Menggunakan kaedah ini, anda boleh menghidupkan perubahan dalam kedudukan atau saiz item grid anda. Walau bagaimanapun, pendekatan ini tidak boleh menghidupkan perubahan dalam bilangan trek grid atau struktur keseluruhan reka letak grid.

Memandangkan sokongan penyemak imbas untuk Reka Letak Grid CSS dan peralihan terus bertambah baik, kami boleh mengharapkan untuk melihat sokongan yang lebih baik untuk animasi melibatkan reka letak grid pada masa hadapan.

Atas ialah kandungan terperinci Bolehkah Anda Menggunakan Peralihan CSS dengan Reka Letak Grid CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!