Transformasi pada sifat paparan CSS

Question

Saya sedang mereka bentuk menu "megadropdown" CSS - pada asasnya dropdown CSS tulen biasa, tetapi dengan jenis kandungan yang berbeza.

Pada masa ini, peralihan CSS 3 nampaknya tidak berfungsi dengan sifat 'paparan', iaitu anda tidak boleh membuat apa-apa jenis peralihan/kod> daripada paparan: tiada< paparan: blok

Adakah terdapat cara untuk menjadikan menu peringkat kedua dalam contoh di atas "memudar" apabila seseorang menuding pada salah satu item menu peringkat atas?

Saya tahu anda boleh menggunakan perubahan pada atribut keterlihatan: tetapi saya tidak dapat memikirkan cara untuk menggunakannya dengan cekap.

Saya juga cuba menggunakan ketinggian, tetapi gagal dengan teruk.

Saya juga tahu adalah mudah untuk melakukan ini menggunakan JavaScript, tetapi saya ingin mencabar diri saya untuk menggunakan CSS sahaja, dan saya rasa kebolehan saya agak kurang.

Answer 1

Anda perlu menyembunyikan elemen dengan cara lain untuk menjadikannya berfungsi.

Saya mencapai kesan ini dengan menggabungkan dua

绝对定位并将隐藏的设置为 opacity: 0.

Jika anda menggantikan display 属性从 none 切换为 block, transformasi pada elemen lain tidak akan berlaku. 强>

Untuk membetulkannya, sentiasa benarkan elemen menjadi display: block, tetapi sembunyikan elemen dengan melaraskan mana-mana yang berikut:

1. akan高度设置为0.
2. akan不透明度设置为0.
3. Letakkan elemen ini di luar bingkai lain dengan elemen overflow:hidden.

Mungkin terdapat lebih banyak penyelesaian, tetapi jika anda menukar elemen kepada display: none, transformasi tidak dapat dilakukan. Sebagai contoh, anda boleh mencuba sesuatu seperti ini:

div {
    display: none;
    transition: opacity 1s ease-out;
    opacity: 0;
}
div.active {
    opacity: 1;
    display: block;
}

Tetapi ini tidak berkesan. Dalam pengalaman saya, saya mendapati bahawa ini tidak melakukan apa-apa.

Jadi, anda perlu sentiasa mengekalkan unsur tersebut display: block - tetapi anda boleh mengatasinya dengan melakukan perkara berikut:

div {
    transition: opacity 1s ease-out;
    opacity: 0;
    height: 0;
    overflow: hidden;
}
div.active {
    opacity: 1;
    height: auto;
}

Answer 2

Anda boleh menyambungkan dua atau lebih peralihan, dan visibility akan berguna kali ini.

div {
  border: 1px solid #eee;
}
div > ul {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
  visibility: visible;
  opacity: 1;
}

<div>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</div>