Transformations sur les propriétés d'affichage CSS
P粉958986070
P粉958986070 2023-08-23 12:27:32
0
2
585
<p>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. </p> <p>Actuellement, les transitions <strong>CSS 3 ne semblent pas fonctionner avec l'attribut 'display'</strong>, c'est-à-dire que vous ne pouvez effectuer aucun type de transition/code> <code>affichage : bloc</code> </code></p><code> <p>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 ? </p> <p>Je sais que vous pouvez utiliser une transformation sur l'attribut <code>visibility:</code>, mais je ne trouve pas de moyen de l'utiliser efficacement. </p> <p>J'ai également essayé d'utiliser la hauteur, mais j'ai lamentablement échoué. </p> <p>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. </p></code>
P粉958986070
P粉958986070

répondre à tous(2)
P粉701491897

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

P粉071743732

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>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal