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

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>