Rumah >hujung hadapan web >tutorial css >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
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!