Mengapa Peralihan CSS3 Tidak Berfungsi Apabila Paparan Ditetapkan Kepada Tiada?

Peralihan CSS3 Tidak Berfungsi dengan Harta Paparan

Dalam CSS, sifat paparan memainkan peranan penting dalam menentukan sama ada elemen kelihatan atau tersembunyi . Peralihan, sebaliknya, membolehkan perubahan visual yang lancar dari semasa ke semasa. Walau bagaimanapun, cubaan menggunakan peralihan kepada elemen dengan set paparan kepada tiada boleh membawa kepada tingkah laku yang tidak dijangka.

Menangani Masalah

Isu ini berpunca daripada sifat paparan harta benda. Apabila paparan elemen ditetapkan kepada tiada, ia dialih keluar dari halaman seolah-olah ia tidak pernah ada. Oleh itu, ia tidak boleh dipaparkan separa atau mengalami peralihan.

Penyelesaian Alternatif: Menggunakan Kelegapan

Untuk mencapai kesan pudar yang diingini pada tuding, pertimbangkan untuk menggunakan sifat kelegapan sebaliknya . Kelegapan mengawal ketelusan elemen, membolehkan unsur itu muncul atau hilang secara beransur-ansur.

Penyelesaian CSS

Laksanakan pelarasan CSS berikut untuk mendayakan kesan pudar:

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

#header #button .content {
    opacity: 0;
    height: 0;
    padding: 0 8px;
    overflow: hidden;
    transition: all .3s ease .15s;
}

Dengan menggabungkan kelegapan dan peralihan, kandungan tersembunyi menjadi pudar ke paparan apabila menuding di atas butang. Awalan vendor untuk keserasian merentas penyemak imbas telah ditinggalkan untuk ringkasnya.

Pertimbangan Lain

Selain daripada kelegapan, seseorang juga boleh meneroka melaraskan sifat ketinggian dan pelapik untuk mencapai yang serupa kesan.

Tambahan Sumber

• [Tutorial Peralihan CSS](https://www.w3schools.com/css/css3_transitions.asp)
• [Mengendalikan Elemen Tersembunyi dengan CSS Peralihan](https://css-tricks.com/transitions-with-hidden-elements/)
• [Topik Serupa tentang Stack Overflow](https://stackoverflow.com/questions/30130725/css- animasi-tidak-kelihatan-apabila-display-tiada)

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