Vous devez masquer l'élément d'une autre manière pour qu'il fonctionne correctement.

J'ai obtenu l'effet en combinant deux <div> 都设置为绝对定位，并将隐藏的一个设置为 opacity: 0.

Si vous ajoutez display 属性从 none 切换到 block, l'effet de transition pour les autres éléments ne se produira pas.

Pour résoudre ce problème, autorisez toujours les éléments à être display: block, mais masquez les éléments de l'une des manières suivantes :

1. volonté height 设置为 0.
2. volonté opacity 设置为 0.
3. Positionne un élément en dehors du cadre d'un autre élément avec overflow: hidden.

Il y a peut-être d'autres solutions, mais si vous basculez l'élément sur display: none, vous ne pourrez pas effectuer la transition. Par exemple, vous pourriez essayer quelque chose de similaire à :

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

Mais cela ne fonctionnera pas. D'après mon expérience, j'ai constaté que cela n'a aucun effet. Vous devez donc toujours conserver les éléments

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

Vous pouvez connecter deux effets de transition ou plus, et visibility cela s'avère pratique.

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>