Transformations sur les propriétés d'affichage CSS

Question

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

Actuellement, les transitions CSS 3 ne semblent pas fonctionner avec l'attribut 'display', c'est-à-dire que vous ne pouvez effectuer aucun type de transition/code> affichage : bloc

Existe-t-il un moyen de faire apparaître le menu de deuxième niveau dans l'exemple ci-dessus lorsque quelqu'un survole l'un des éléments du menu de niveau supérieur ?

Je sais que vous pouvez utiliser une transformation sur l'attribut visibility:, mais je ne trouve pas de moyen de l'utiliser efficacement.

J'ai également essayé d'utiliser la hauteur, mais j'ai lamentablement échoué.

Je sais aussi qu'il est facile de faire cela en utilisant JavaScript, mais je veux me mettre au défi d'utiliser simplement CSS, et je pense que mes capacités font un peu défaut.

Answer 1

Vous devez masquer l'élément d'une autre manière pour le faire fonctionner.

J'ai obtenu cet effet en combinant deux

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

Si vous remplacez display 属性从 none 切换为 block, la transformation sur les autres éléments n'aura pas lieu.

Pour résoudre ce problème, autorisez toujours l'élément à être display: block, mais masquez-le en ajustant l'un des éléments suivants :

1. volonté高度设置为0.
2. volonté不透明度设置为0.
3. Placez cet élément à l'extérieur d'un autre cadre avec un élément overflow:hidden.

Il peut y avoir d'autres solutions, mais si vous basculez l'élément sur display: none, la transformation ne peut pas être effectuée. Par exemple, vous pouvez essayer quelque chose comme ceci :

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

Mais ça ne marche pas. D'après mon expérience, j'ai constaté que cela ne faisait rien.

Vous devez donc toujours préserver l'élément display: block - mais vous pouvez le contourner en procédant comme suit :

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

Answer 2

Vous pouvez connecter deux transitions ou plus, et visibility vous sera utile cette fois.

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>