Transisi Ketinggian dari 0 ke Otomatis Menggunakan CSS

Transisi Ketinggian Halus dari 0 ke Otomatis Menggunakan CSS

CSS dan HTML

<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>

Solusi JavaScript untuk Transisi Ketinggian yang Halus

HTML, CSS, dan JavaScript

<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>

Transisi Ketinggian Halus Menggunakan Variabel CSS

CSS dan HTML

<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>

Pertanyaan Umum Tentang Transisi dan Animasi CSS

1. Bagaimana cara mentransisikan ketinggian dari 0 ke otomatis menggunakan CSS?
2. Untuk mencapai hal ini, Anda dapat menggunakan kombinasi ketinggian tetap dan JavaScript untuk mengatur nilai ketinggian secara dinamis. Solusi CSS murni terbatas karena height: auto tidak dapat dianimasikan secara langsung.
3. Apa perbedaan transisi dan animasi di CSS?
4. Transisi CSS menyediakan cara untuk mengubah nilai properti dengan lancar (selama durasi tertentu) dari satu keadaan ke keadaan lainnya, biasanya pada perubahan keadaan seperti hover. Animasi CSS memungkinkan urutan yang lebih kompleks menggunakan bingkai utama untuk menentukan status dan waktu.
5. Bisakah saya menggunakan transisi CSS untuk elemen dengan tinggi dinamis?
6. Ya, tetapi biasanya Anda perlu menghitung ketinggian terlebih dahulu atau menggunakan JavaScript untuk menyetel nilai ketinggian secara dinamis agar transisi berjalan lancar.
7. Apa tujuan dari overflow: hidden; properti dalam transisi CSS?
8. Itu overflow: hidden; Properti ini digunakan untuk menyembunyikan konten apa pun yang melebihi batas elemen, yang penting untuk transisi bersih yang melibatkan perubahan ketinggian.
9. Bagaimana keyframes bekerja di animasi CSS?
10. Keyframes dalam animasi CSS memungkinkan Anda menentukan status suatu elemen di berbagai titik selama animasi. Anda dapat menentukan properti dan nilainya di setiap keyframe, sehingga membuat animasi yang kompleks.
11. Bisakah saya menggabungkan transisi dan animasi CSS?
12. Ya, menggabungkan transisi dan animasi CSS dapat memberikan pengalaman pengguna yang lebih kaya dengan menangani perubahan status dan animasi berkelanjutan.
13. Apa scrollHeight dalam JavaScript?
14. scrollHeight mengembalikan tinggi total suatu elemen, termasuk konten yang tidak terlihat di layar karena meluap. Ini berguna untuk menghitung ketinggian dinamis untuk transisi yang mulus.
15. Bagaimana animation-delay bekerja?
16. Itu animation-delay properti menentukan kapan animasi harus dimulai. Ini memungkinkan Anda mengurutkan beberapa animasi untuk efek berlapis.
17. Kenapa :root digunakan dalam CSS?
18. Itu :root kelas semu menargetkan elemen akar dokumen. Biasanya digunakan untuk mendefinisikan variabel CSS global yang dapat digunakan kembali di seluruh stylesheet.

Pemikiran Terakhir tentang Transisi Ketinggian yang Halus

Mencapai transisi yang mulus dari ketinggian 0 ke otomatis di CSS memerlukan kombinasi teknik. Meskipun CSS murni menawarkan kesederhanaan, namun dibatasi oleh kebutuhan akan ketinggian yang telah ditentukan sebelumnya. Dengan mengintegrasikan JavaScript, Anda dapat menghitung dan mengatur ketinggian secara dinamis, sehingga memberikan transisi yang mulus. Memanfaatkan variabel CSS juga dapat menawarkan pendekatan yang fleksibel untuk mengelola nilai dinamis. Menggabungkan metode ini memungkinkan pengembang untuk menciptakan pengalaman web yang lebih interaktif dan menarik tanpa perubahan mendadak yang biasanya terkait dengan transisi ketinggian.