Mengapa Peralihan CSS Saya Hanya Mudah Masuk, Bukan Keluar?

Peralihan CSS: Melonggarkan Masuk dan Melonggarkan

Apabila mereka bentuk elemen web dinamik, peralihan memainkan peranan penting dalam meningkatkan pengalaman pengguna. Walau bagaimanapun, kadangkala timbul isu yang menghalang kesan peralihan yang diingini. Satu masalah biasa yang dihadapi ialah apabila peralihan elemen hanya mudah masuk tetapi tidak reda.

Melonggarkan Masuk dan Keluar:

Peralihan CSS membolehkan animasi lancar bagi perubahan pada sifat CSS elemen. Sifat peralihan biasanya termasuk pilihan mudah masuk, yang menunjukkan bahawa animasi harus dimulakan dengan perlahan dan beransur-ansur memecut dan menyahpecut semasa ia berjalan. Walau bagaimanapun, jika hanya kata kunci mudah masuk digunakan, animasi hanya akan berkurangan apabila bermula, mengakibatkan peralihan mendadak apabila tamat.

Penyelesaian:

Untuk membetulkan isu ini dan memastikan peralihan juga berkurangan, sifat peralihan perlu digunakan pada elemen itu sendiri dan bukannya kelas pseudo :hover. Dengan berbuat demikian, peralihan akan berlaku apabila elemen dilegarkan dan apabila tetikus dialih keluar, memberikan animasi yang lancar dalam kedua-dua arah.

Kod Disemak:

<code class="css">.img-blur {
  transition: all 0.35s ease-in-out;
}
.img-blur:hover {
  -moz-filter: blur(4px);
  -webkit-filter: blur(4px);
  filter: blur(4px);
}</code>

Fungsi Tambahan:

Selain itu, teks boleh dipaparkan apabila tetikus melayang di atas elemen menggunakan CSS sahaja. Teknik ini bergantung pada sifat kandungan dan unsur pseudo untuk mencipta kesan yang diingini. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa sokongan untuk ciri ini mungkin berbeza-beza merentas penyemak imbas yang berbeza.

Atas ialah kandungan terperinci Mengapa Peralihan CSS Saya Hanya Mudah Masuk, Bukan Keluar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!