Transformations sur les propriétés d'affichage CSS
P粉958986070
2023-08-23 12:27:32
<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>
Vous devez masquer l'élément d'une autre manière pour le faire fonctionner.
J'ai obtenu cet effet en combinant deux 绝对定位并将隐藏的设置为 - volonté
- volonté
- Placez cet élément à l'extérieur d'un autre cadre avec un élément
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 :高度
设置为0
.不透明度
设置为0
.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 :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 :Vous pouvez connecter deux transitions ou plus, et
visibility
vous sera utile cette fois.