Mengapa Peralihan CSS3 Tidak Berfungsi dengan Harta Paparan?

Peralihan CSS3 Tidak Berfungsi dengan Sifat Paparan

Dalam CSS, sifat paparan menentukan sama ada elemen dipaparkan atau tidak. Apabila elemen ditetapkan untuk dipaparkan: tiada, ia dialih keluar daripada aliran dokumen, bermakna ia tidak memerlukan ruang dan tidak kelihatan. Ini menjadikannya mustahil untuk menggunakan peralihan CSS untuk menghidupkan penampilan atau kehilangan elemen dengan paparan: tiada.

Untuk mencapai kesan pudar masuk yang lancar untuk elemen tersembunyi, sifat paparan tidak boleh digunakan. Sebaliknya, sifat kelegapan boleh digunakan untuk menukar ketelusan elemen. Kod CSS berikut menunjukkan cara menggunakan sifat kelegapan untuk mencipta kesan fade-in:

#header #button:hover .content {
  opacity: 1;
  transition: opacity 0.3s ease 0.15s; /* Vendor prefixes omitted for brevity. */
}

#header #button .content {
  opacity:0;
}

Dalam kod ini, kelegapan elemen tersembunyi ditetapkan kepada 0 apabila elemen #header #button ialah tidak berlegar di atas. Apabila elemen #header #button dituding di atas, kelegapan elemen tersembunyi ditetapkan kepada 1, mendedahkannya dengan kesan pudar masuk yang lancar.

Atas ialah kandungan terperinci Mengapa Peralihan CSS3 Tidak Berfungsi dengan Harta Paparan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!