Bagaimanakah Saya Boleh Menghidupkan Lebar Elemen CSS dengan `width: auto`?

Menghidupkan Lebar Kandungan dengan lebar: auto

Satu cabaran biasa dalam CSS ialah menganimasikan lebar elemen apabila kandungannya berubah. Ini boleh menjadi rumit, terutamanya apabila elemen mempunyai lebar: auto, yang menghalang penetapan lebar eksplisit.

Penyelesaian tradisional ialah menggunakan sifat peralihan untuk menghidupkan antara dua nilai lebar tertentu. Walau bagaimanapun, pendekatan ini tidak berfungsi dengan baik untuk kandungan yang boleh berbeza-beza panjangnya, kerana ia memerlukan penetapan nilai lebar secara manual yang elemen itu boleh beralih antara.

Seperti yang dinyatakan oleh pengulas, pada masa ini tidak mungkin untuk menghidupkan secara langsung lebar: harta auto. Satu penyelesaian ialah menggunakan sifat lebar maksimum dan ketinggian maksimum. Dengan menyediakan lebar maksimum yang cukup besar untuk kandungan, kami boleh memastikan ia sentiasa muat, walaupun apabila dikembangkan.

Berikut ialah contoh helah "lebar maksimum":

.myspan {
  display: inline-block;
  font-size: 30px;
  background-color: #ddd;
  vertical-align: bottom;
}
.myspan::after {
  content: " a0\f12a ";
  font-family: ionicons;
  font-size: 80%;  
  display: inline-block;
  max-width: 0;
  transition: max-width .6s;
  vertical-align: bottom;
  overflow: hidden;
}
.myspan:hover::after {
  max-width: 80px;
  transition: max-width 1s;
}

Di sini, kami melaksanakan animasi "flush" apabila tetikus melayang di atas elemen. Kandungan kekal pada 30px, manakala ikon meluncur keluar dengan lancar menggunakan animasi lebar maksimum.

Jika ketepatan yang lebih tinggi dikehendaki, penyelesaian JavaScript boleh digunakan. Ini melibatkan penetapan lebar elemen secara dinamik berdasarkan panjang kandungannya. Walaupun pendekatan ini memberikan lebih kawalan, pendekatan ini disertakan dengan kerumitan tambahan pelaksanaan JavaScript.

Ringkasnya, semasa menganimasikan lebar: auto terus belum dapat dilakukan, penyelesaian seperti helah "lebar maksimum" atau skrip JavaScript boleh digunakan untuk mencapai kesan yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghidupkan Lebar Elemen CSS dengan `width: auto`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!