Effet dégradé des propriétés d'affichage CSS

Question

Je suis actuellement en train de concevoir une "super liste déroulante" CSS - essentiellement une liste déroulante CSS pure, mais avec différents types de contenu.

Actuellement, , il semble que les effets de transition CSS 3 ne s'appliquent pas à l'attribut "display", c'est-à-dire qu'il n'y a aucun moyen de passer de display: none à < code>afficher : bloc

Dans l'exemple ci-dessus, existe-t-il un moyen de faire apparaître en fondu le menu de deuxième niveau lorsque quelqu'un survole l'élément de menu supérieur ?

Je sais que vous pouvez utiliser des effets de transition sur l'attribut visibility:, mais je n'arrive pas à trouver un moyen de l'utiliser efficacement.

J'ai également essayé d'utiliser la hauteur, mais les résultats ont été terribles.

Je sais aussi que cela peut être facilement réalisé en utilisant JavaScript, mais je voulais me mettre au défi d'utiliser simplement CSS, mais j'ai l'impression d'être un peu dépassé.

Answer 1

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

- mais vous pouvez contourner ce problème en :

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

Answer 2

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>