Mengapa Peralihan CSS Gagal Berfungsi Dengan Harta Keterlihatan?

Peralihan dan Keterlihatan CSS: Ilusi Mengelirukan

Dalam CSS, peralihan membenarkan animasi yang lancar antara keadaan harta benda. Walau bagaimanapun, isu yang membingungkan timbul apabila cuba mengalihkan keterlihatan, membuatkan pengguna bingung dan tertanya-tanya sama ada ia adalah pepijat.

Kes Peralihan Keterlihatan

Pertimbangkan kod berikut:

<code class="css">#inner {
    visibility: hidden;
    transition: visibility 1000ms;
}

#outer:hover #inner {
    visibility: visible;
}</code>

Kod ini bertujuan untuk mendedahkan elemen dengan ID "dalaman" apabila menuding di atas elemen dengan ID "luar". Namun, yang mengecewakan kami, peralihan itu gagal berfungsi seperti yang diharapkan. Daripada peralihan yang lancar, keterlihatan bertukar secara tiba-tiba selepas kelewatan, yang sepadan dengan tempoh peralihan yang ditentukan.

Pelakunya

Punca utama terletak pada sifat keterlihatan harta benda. Tidak seperti sifat seperti kelegapan, yang mewakili nilai berterusan (0-1), keterlihatan wujud dalam keadaan binari (kelihatan atau tersembunyi). Perbezaan asas ini menghalang peralihan, kerana tiada keadaan perantaraan untuk diinterpolasi.

Sifat Boleh Peralihan

Peralihan bergantung pada pengiraan bingkai utama antara dua nilai berangka. Dalam kes kelegapan, peralihan pudar dengan lancar antara 0 dan 1. Walau bagaimanapun, dengan keterlihatan, peralihan tidak mempunyai julat berangka yang diperlukan untuk interpolasi.

Kesimpulan

Sementara pada mulanya menyerupai pepijat, tingkah laku ini merupakan had yang wujud bagi peralihan CSS. Hanya sifat dengan nilai yang boleh dikira boleh dianimasikan dengan lancar. Untuk sifat binari seperti keterlihatan, perubahan keadaan mendadak tidak dapat dielakkan.

Atas ialah kandungan terperinci Mengapa Peralihan CSS Gagal Berfungsi Dengan Harta Keterlihatan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!