Peralihan Ketinggian daripada 0 kepada Auto Menggunakan CSS

Mencipta Peralihan Ketinggian Lancar dengan CSS

Peralihan ketinggian elemen daripada 0 kepada auto menggunakan CSS boleh mencabar kerana kekurangan titik akhir yang ditentukan untuk nilai auto. Ini sering menyebabkan unsur muncul secara tiba-tiba tanpa kesan peralihan yang lancar.

Dalam artikel ini, kami akan meneroka cara untuk mencapai kesan slaid ke bawah yang lancar untuk a elemen menggunakan peralihan CSS. Kami akan mengkaji isu biasa dan menyediakan penyelesaian untuk mencipta peralihan yang lancar tanpa bergantung pada JavaScript.

Memahami Peralihan Ketinggian Lancar dalam CSS

Skrip pertama menunjukkan pendekatan CSS sahaja untuk mengalihkan ketinggian elemen daripada 0 kepada ketinggian yang ditentukan. Dengan menggunakan overflow: hidden; harta, sebarang kandungan yang melampaui ketinggian elemen disembunyikan, memastikan peralihan yang bersih. The transition: height 1s ease; hartanah menggunakan kesan peralihan yang lancar pada ketinggian lebih 1 saat. Apabila elemen induk dituding di atas, ketinggian elemen anak berubah kepada nilai yang telah ditetapkan, mewujudkan ilusi gelongsor ke bawah. Kaedah ini, bagaimanapun, memerlukan anda mengetahui ketinggian akhir elemen terlebih dahulu.

Skrip kedua menggabungkan JavaScript untuk melaraskan ketinggian elemen secara dinamik. Apabila elemen induk dituding di atas, skrip mengira ketinggian penuh kandungan yang digunakan scrollHeight dan menetapkan nilai ini kepada style.height harta unsur kanak-kanak. Ini memastikan peralihan yang lancar dari ketinggian 0 kepada ketinggian kandungan penuh tanpa mengetahui ketinggian akhir terlebih dahulu. The addEventListener('mouseenter') dan addEventListener('mouseleave') fungsi digunakan untuk mengendalikan peristiwa tuding tetikus, memastikan bahawa ketinggian beralih kembali kepada 0 apabila tetikus meninggalkan elemen induk.

Teknik Lanjutan untuk Peralihan Ketinggian CSS

Skrip ketiga memanfaatkan pembolehubah CSS untuk mengurus peralihan ketinggian. Dengan mentakrifkan pembolehubah global :root untuk ketinggian maksimum, kita boleh menetapkan nilai ini secara dinamik kepada elemen anak semasa keadaan tuding. Pembolehubah var(--max-height) digunakan dalam CSS untuk menetapkan ketinggian, memastikan peralihan lancar dan boleh disesuaikan dengan perubahan dalam kandungan. Pendekatan ini menggabungkan kesederhanaan CSS dengan fleksibiliti nilai dinamik, menjadikannya lebih mudah untuk mengurus dan mengemas kini ketinggian peralihan mengikut keperluan.

Setiap kaedah ini menawarkan penyelesaian yang berbeza kepada masalah peralihan ketinggian elemen daripada 0 kepada auto. Pendekatan CSS tulen adalah mudah tetapi terhad oleh keperluan untuk ketinggian yang telah ditetapkan. Kaedah JavaScript memberikan lebih fleksibiliti, membolehkan pengiraan ketinggian dinamik, tetapi memerlukan skrip tambahan. Teknik pembolehubah CSS menawarkan jalan tengah, menggabungkan kemudahan penggunaan dengan keupayaan dinamik. Dengan memahami dan menggunakan teknik ini, pembangun boleh mencipta peralihan ketinggian yang licin dan menarik secara visual dalam projek web mereka.

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: 100px; /* Set this to the max height you expect */
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

<style>
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>
<script>
  const parent = document.getElementById('parent');
  const child = document.getElementById('child');
  parent.addEventListener('mouseenter', () => {
    child.style.height = child.scrollHeight + 'px';
  });
  parent.addEventListener('mouseleave', () => {
    child.style.height = '0';
  });
</script>

<style>
  :root {
    --max-height: 100px;
  }
  #child {
    height: 0;
    overflow: hidden;
    background-color: #dedede;
    transition: height 1s ease;
  }
  #parent:hover #child {
    height: var(--max-height);
  }
</style>
<div id="parent">
  <h1>Hover me</h1>
  <div id="child">
    Some content<br>
    Some content<br>
    Some content<br>
  </div>
</div>

Meneroka Animasi CSS untuk Peralihan Lancar

Selain ketinggian peralihan, animasi CSS menyediakan cara yang serba boleh untuk mencipta kesan visual yang lancar. Animasi CSS membolehkan anda menganimasikan rangkaian luas sifat melebihi ketinggian, termasuk kelegapan, transformasi dan warna. Dengan mentakrifkan bingkai utama, anda boleh mengawal langkah perantaraan animasi, menghasilkan peralihan yang lebih kompleks dan menarik secara visual. Contohnya, anda boleh menggabungkan peralihan ketinggian dengan kesan fade-in untuk mencipta pengalaman pengguna yang lebih dinamik dan menarik. Peraturan kerangka utama dalam CSS membolehkan anda menentukan keadaan permulaan dan akhir animasi, serta sebarang bilangan keadaan perantaraan, memberikan anda kawalan terperinci ke atas proses animasi.

Satu lagi aspek animasi CSS ialah keupayaan untuk menyusun berbilang animasi menggunakan sifat kelewatan animasi. Sifat ini membolehkan anda menggoncangkan masa mula animasi yang berbeza, mencipta kesan berlapis. Sebagai contoh, anda boleh mempunyai peralihan ketinggian elemen dahulu, diikuti dengan perubahan warna, dan kemudian putaran transformasi. Dengan mengatur animasi ini dengan teliti, anda boleh mencipta antara muka pengguna yang canggih dan digilap. Selain itu, animasi CSS boleh digabungkan dengan peralihan CSS untuk mengendalikan kedua-dua perubahan keadaan diskret dan berterusan, menawarkan kit alat yang komprehensif untuk mencipta pengalaman web interaktif.