Bagaimana untuk Menghidupkan Elemen Tersembunyi dalam CSS?

Animasi dan Paparan CSS: Tiada

Dalam CSS, elemen animasi yang tersembunyi (cth., paparan: tiada) adalah tidak mudah. Semasa menetapkan paparan: tiada satu pun mengalih keluar elemen daripada aliran dokumen, ia masih menempati ruang. Untuk menyelesaikan isu ini:

1. Tetapkan Ketinggian Tetap:

Memandangkan anda tidak boleh menghidupkan antara paparan: tiada dan paparan: blok, betulkan ketinggian awal elemen tersembunyi pada ketinggian yang akan didudukinya apabila didedahkan.

CSS:

#main-div {
  height: 0;
  display: block;
  overflow: hidden;
  animation-delay: 3.5s;
}

2. Gunakan Kerangka Kunci Animasi:

Tentukan kerangka utama animasi yang mengalihkan elemen dari ketinggian 0 ke ketinggian yang diingini.

CSS:

@keyframes main-div-slide {
  from {
    height: 0;
  }
  to {
    height: 375px;
  }
}

3. Gunakan Animasi:

Kaitkan bingkai utama animasi dengan elemen tersembunyi.

CSS:

#main-div {
  animation: main-div-slide 1s ease 3.5s forwards;
}

Sekarang, elemen tersembunyi akan meluncur ke bawah dengan lancar tanpa menjejaskan susun atur elemen lain pada halaman.

Nota: Pendekatan ini berfungsi jika anda mempunyai ketinggian tetap untuk elemen tersembunyi. Untuk ketinggian dinamik, anda mungkin perlu menggunakan jQuery atau JavaScript.

Atas ialah kandungan terperinci Bagaimana untuk Menghidupkan Elemen Tersembunyi dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!