Grid CSS boleh melakukan peralihan ketinggian auto

Petua CSS! Nelson Menezes telah menemui pendekatan baru (kini hanya berfungsi di Firefox), yang sangat pandai.

Anda mungkin tahu bahawa CSS tidak boleh bertukar kepada saiz automatik, yang sangat malang. Dari animasi sifar hingga "saiz permintaan" sangat berguna dalam banyak kes. Kami telah mendokumenkan teknologi yang ada. Mereka mendidih ke:

• Animate max-height ke nilai yang lebih besar daripada yang anda perlukan, yang membuat masa mengurangkan tidak tepat dan tidak lancar.
• Gunakan JavaScript untuk mengukur saiz akhir dan menghidupkannya, yang bermaksud ... Gunakan JavaScript.

Teknologi Nelson bukanlah ini atau beberapa jenis pendekatan berasaskan penukaran yang mempunyai kekaguman visual. Teras teknologi ini menggunakan grid CSS ...

 .Expander {
  paparan: grid;
  grid-template-baris: 0FR;
  Peralihan: Grid-template-baris 1s;
}

.expander.expanded {
  Grid-template-baris: 1FR;
}

Hebatnya, di Firefox, peralihan ini antara kandungan dalam kawasan itu dari 0 hingga ketinggian semula jadi kandungan. Hanya melakukan sedikit kerja tambahan seperti menyembunyikan limpahan dan penglihatan untuk menjadikannya kelihatan betul sambil mengekalkan kebolehcapaian:

Ini hebat. Mari kita perhatikan isu ini, dan mungkin Chrome juga akan mengamalkannya. Tetapi sudah tentu, lebih baik jika peralihan ketinggian automatik mula berfungsi. Saya tidak dapat membayangkan ini benar -benar mustahil.

Atas ialah kandungan terperinci Grid CSS boleh melakukan peralihan ketinggian auto. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!