Mengapa Peralihan CSS3 Saya Gagal Apabila Saya Menukar Harta Paparan?

Peralihan CSS3 Tidak Berfungsi dengan Sifat Paparan

Soalan:

Mengapa peralihan CSS3 gagal berfungsi apabila sifat paparan adalah diubah suai?

Jawapan:

Apabila sifat paparan ditetapkan kepada "tiada", keseluruhan elemen blok disembunyikan dengan berkesan, menghalang sebarang kesan peralihan. Sebagai alternatif, menggunakan kelegapan membolehkan kesan pudar dan peralihan yang lebih lancar.

Penyelesaian CSS Alternatif:

Untuk mencapai kesan peralihan yang lancar, manipulasi sifat kelegapan, ketinggian dan pelapik sebaliknya:

#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;
}

Demo Kerja:

[Fiddle](https://jsfiddle.net/alexdocker/KAyvL/)

Nota Tambahan:

• Awalan vendor telah ditinggalkan untuk ringkasnya.
• Anda juga boleh mempertimbangkan untuk melaraskan jejari sempadan untuk mencipta kesan peralihan yang lebih halus.
• Rujuk [perbincangan SO] ini(https://stackoverflow.com/questions/13691003/displaynone-css3-transition) untuk mendapatkan cerapan yang serupa.

Atas ialah kandungan terperinci Mengapa Peralihan CSS3 Saya Gagal Apabila Saya Menukar Harta Paparan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!