Kesan kecerunan sifat paparan CSS

Question

Saya sedang mereka bentuk "jatuh turun super" CSS - pada asasnya lungsur turun CSS tulen biasa, tetapi dengan pelbagai jenis kandungan di dalamnya.

Pada masa ini, nampaknya kesan peralihan CSS 3 tidak digunakan pada atribut "display", iaitu, tiada cara untuk beralih daripada display: none untuk paparkan: blok

Dalam contoh di atas, adakah terdapat cara untuk menjadikan menu tahap kedua "pudar masuk" apabila seseorang menuding di atas item menu atas?

Saya tahu anda boleh menggunakan kesan peralihan pada atribut keterlihatan: tetapi saya tidak dapat memikirkan cara untuk menggunakannya dengan berkesan.

Saya juga cuba menggunakan ketinggian, tetapi hasilnya sangat mengerikan.

Saya juga tahu bahawa perkara ini boleh dicapai dengan mudah menggunakan JavaScript, tetapi saya ingin mencabar diri saya untuk menggunakan CSS sahaja, tetapi saya rasa saya agak tidak tahu apa-apa.

Answer 1

Anda perlu menyembunyikan elemen dengan cara lain untuk menjadikannya berfungsi dengan baik.

Saya mencapai kesannya dengan menggabungkan dua <div> 都设置为绝对定位，并将隐藏的一个设置为 opacity: 0.

Jika anda menambah display 属性从 none 切换到 block, kesan peralihan untuk elemen lain tidak akan berlaku.

Untuk membetulkan perkara ini, sentiasa benarkan elemen menjadi display: block, tetapi sembunyikan elemen dengan mana-mana yang berikut:

1. akan height 设置为 0.
2. akan opacity 设置为 0.
3. Letakkan elemen di luar bingkai elemen lain dengan overflow: hidden.

Mungkin terdapat lebih banyak penyelesaian, tetapi jika anda menukar elemen kepada display: none anda tidak boleh melakukan peralihan. Contohnya, anda mungkin mencuba sesuatu yang serupa dengan:

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

Tetapi ini tidak berfungsi. Dalam pengalaman saya, saya mendapati bahawa ini tidak mempunyai sebarang kesan.

Jadi, anda sentiasa perlu mengekalkan elemen display: block - tetapi anda boleh mengatasinya dengan:

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 kesan peralihan, dan visibility ini berguna.

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>