Mengapa Peralihan CSS3 Saya Tidak Berfungsi Apabila Menggunakan Harta Paparan?

Peralihan CSS3 Tidak Berfungsi dengan Harta Paparan

Gambaran Keseluruhan

Artikel ini menangani isu peralihan CSS tidak berfungsi dengan betul apabila menggunakan sifat paparan. Ia memberikan cerapan dan penyelesaian alternatif untuk mencapai 效果 yang diingini.

Pernyataan Masalah

Matlamatnya adalah untuk mencipta kesan di mana div tersembunyi hilang dengan lancar apabila melayang di atas elemen induknya. Walau bagaimanapun, percubaan untuk melaksanakan ini menggunakan peralihan CSS tidak berjaya, menyebabkan hanya div tersembunyi muncul tanpa sebarang peralihan.

Punca Punca

Peralihan CSS tidak boleh digunakan pada elemen dengan set sifat paparan kepada tiada. Ini kerana paparan: tiada yang mengalih keluar elemen sepenuhnya daripada aliran dokumen, menjadikannya tidak tersedia untuk sebarang kesan.

Penyelesaian Alternatif

Untuk mencapai kesan pudar yang diingini, kami boleh menggunakan sifat kelegapan sebaliknya daripada paparan. Dengan memanipulasi kelegapan div tersembunyi, kami boleh mendedahkannya secara beransur-ansur apabila dilegar di atas.

Berikut ialah kod CSS yang dikemas kini:

#header #button:hover > .content {
    opacity: 1;
    height: 150px;
    padding: 8px;    
}

#header #button .content {
    opacity:0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;

    -webkit-transition: all .3s ease .15s;
    -moz-transition: all .3s ease .15s;
    -o-transition: all .3s ease .15s;
    -ms-transition: all .3s ease .15s;
    transition: all .3s ease .15s;
}

Dalam kod ini, kelegapan div tersembunyi ditetapkan kepada 0 pada mulanya, menjadikannya tidak kelihatan. Apabila butang induk dituding di atas, kelegapan beralih kepada 1 secara beransur-ansur, mendedahkan div dengan kesan pudar yang licin.

Kesimpulan

Dengan memahami batasan sifat paparan dan melaksanakan penyelesaian alternatif menggunakan kelegapan, seseorang boleh mencapai peralihan fade-in yang diingini效果 untuk elemen tersembunyi semasa tuding.

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