Mengapa Peralihan Keterlihatan CSS Tidak Berfungsi Seperti Kelegapan?

Kesan Peralihan pada Keterlihatan CSS

Pengenalan Masalah

Kesan peralihan biasanya digunakan dalam CSS untuk mencipta animasi yang lancar. Walau bagaimanapun, isu timbul apabila peralihan pada sifat tertentu, seperti keterlihatan. Dalam situasi ini, peralihan nampaknya tidak berfungsi seperti yang dijangkakan dan gelagat berbeza daripada sifat lain seperti kelegapan.

Peralihan pada Keterlihatan lwn. Kelegapan

Dalam contoh yang disediakan, peralihan digunakan pada keterlihatan dan kelegapan elemen:

Untuk keterlihatan:

#inner {
  visibility: hidden;
  transition: visibility 1000ms;
}
#outer:hover #inner {
  visibility: visible;
}

Untuk kelegapan:

#inner1 {
  opacity: 0;
  transition: opacity 1000ms;
}
#outer1:hover #inner1 {
  opacity: 1;
}

Kesan peralihan berfungsi seperti yang dijangkakan untuk kelegapan, tetapi gagal untuk mencetuskan keterlihatan. Walaupun menetapkan tempoh peralihan 1000ms, tiada animasi diperhatikan.

Penjelasan

Tingkah laku yang diperhatikan bukanlah pepijat tetapi hasil daripada cara kesan peralihan dilaksanakan dalam CSS. Peralihan berfungsi dengan mengira bingkai utama antara dua nilai dan menghidupkan keadaan perantaraan. Walau bagaimanapun, keterlihatan ialah nilai perduaan (kelihatan atau tersembunyi), yang tidak membenarkan nilai angka antara keadaan ini.

Akibatnya, tempoh peralihan ditafsirkan sebagai kelewatan sebelum sifat keterlihatan bertukar daripada tersembunyi untuk kelihatan (atau sebaliknya) apabila dituding. Kelewatan ini meniru kesan peralihan, tetapi ia bukan animasi sebenar dalam erti kata yang sama seperti peralihan kelegapan.

Sifat Boleh Peralihan

Untuk memastikan animasi yang lancar, peralihan harus digunakan pada sifat ordinal, yang mempunyai nilai mula dan akhir yang jelas dengan nilai angka. Senarai sifat boleh alih boleh didapati di pautan ini:

[Pautan ke Rujukan Harta Boleh Peralihan]

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