Bolehkah saya Menghidupkan Lebar Elemen Apabila Menggunakan `width: auto` dalam CSS?

Cara Menghidupkan Lebar Kandungan dengan Auto

Dalam CSS, sifat lebar boleh ditetapkan kepada auto untuk memaksa elemen kepada saiz agar muat kandungannya. Walau bagaimanapun, nilai ini biasanya tidak boleh dianimasikan. Akibatnya, lebar elemen tidak akan berubah dengan lancar apabila kandungannya berubah, yang boleh mengganggu secara visual.

Adakah mungkin untuk menganimasikan lebar elemen dengan lebar: auto?

Malangnya, tidak boleh menganimasikan secara langsung sifat lebar elemen yang ditetapkan kepada auto. Nilai auto adalah istimewa kerana ia memaksa elemen untuk mengambil hanya sebanyak ruang yang diperlukan untuk kandungannya. Menganimasikan nilai ini memerlukan menukar kandungan elemen, yang biasanya bukan sesuatu yang kita mahu lakukan.

Penyelesaian Alternatif Menggunakan lebar maksimum

Daripada menganimasikan sifat lebar itu sendiri, kita boleh menggunakan sifat max-width bersama-sama dengan peralihan pada max-width untuk mencipta ilusi menganimasikan lebar. Dengan menetapkan lebar maksimum yang lebih besar daripada lebar sebenar elemen, kita boleh memaksa elemen untuk dimuatkan dalam lebar maksimum tersebut. Apabila kandungan elemen berubah dan menjadi lebih luas, lebar maks akan membenarkan elemen berkembang sehingga saiz maksimum baharunya, mewujudkan rupa lebar animasi.

Kod Contoh:

.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;
}

Dalam contoh ini, elemen .myspan mempunyai sifat lebar maksimum ditetapkan kepada 0. Apabila pengguna menuding di atas elemen, sifat max-width ditukar kepada 80px, yang memaksa elemen untuk berkembang kepada lebar tersebut. Sifat peralihan memastikan perubahan lebar dianimasikan, mewujudkan rupa lebar animasi.

Atas ialah kandungan terperinci Bolehkah saya Menghidupkan Lebar Elemen Apabila Menggunakan `width: auto` dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!