transition CSS ne fonctionne pas à goutte vers le bas

Question

J'utilise le code de cette page:

https://codepen.io/shshaw/pen/gsFch

Maintenant, mon CSS ressemble à:

.subs { 
visibility: hidden; 
opacity: 0; 
transform: translateY(-2em); 
z-index: -1; 
transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; 

width: auto; 
float: left; 
position: absolute; 
text-align: left; 
border: 2px solid #66ec95; 
background: #f4f7f5; 
border-radius: 0 5px 5px 5px; 
margin-top: -10px; 
margin-left: -10px; 
} 

/* SELECTORS */ 

#nav li:hover > .subs { /* with this seletor, only the last property is working */ 
visibility: visible; 
opacity: 1; 
z-index: 1; 
transform: translateY(0%); 
transition-delay: 0s, 0s, 0.3s; 
margin-top: 10px; /* just for test, only this is working */ 
} 

#nav li :hover + .subs { /* this time, the animation are working but other problems occured (see above) */ 
visibility: visible; 
opacity: 1; 
z-index: 1; 
transform: translateY(0%); 
transition-delay: 0s, 0s, 0.3s; 
} 

Mon HTML:

<ul id="nav"> 
      <li aria-haspopup="true"> 
       <a href="javascript:void(0)">Services</a> 
       <div class="subs" id="service-subs" aria-haspopup="false"> 
        <a href="~/services/all">Product List</a><br /> 
        <a href="~/services/projects">Projects</a><br /> 
       </div> 
      </li> 
      ... and so on 

Ainsi, le second sélecteur pour .subs affiche l'animation, mais il se brise quand je déplace mon curseur dans .subs et il est également interrompu à plusieurs reprises sur l'affichage à cause du curseur détecte .subs tout en montrant le menu.

En outre, je ne peux pas comprendre pourquoi cela fonctionne avec le sélecteur sibling .subs est un enfant de #nav li.

Qu'est-ce que je fais mal?

Merci!

Answer 1

Je ne suis pas sûr à 100% sur la question de savoir pourquoi votre code ne fonctionnait pas. Je l'ai réécrit pour essayer d'obtenir ce que vous vouliez en utilisant des méthodes qui, je pense, sont plus faciles à utiliser.

1. Utilisant @keyframes est une excellente façon de construire votre application avec des morceaux de code réutilisables.

2. En utilisant translate3d puisera dans le GPU d'un ordinateur/dispositif pour les traductions plus fluides.

Veuillez noter que je n'ai pas pris le temps d'ajouter un wrapper HTML qui masquerait les menus déroulants lorsqu'ils tomberaient. Cela pourrait facilement être fait en enroulant le menu entier dans un div et le réglage de la overflow-hidden.

excusez-moi je ne pourrais pas vous aider à en apprendre davantage pourquoi vous obtenez le bug que vous aviez.

.sub-menu-parent { 
 
    position: relative; 
 
} 
 

 
.sub-menu { 
 
    position: absolute; 
 
    width: 100%; 
 
    display: none; 
 
    z-index:-1; 
 
} 
 

 
.sub-menu-parent:hover .sub-menu { 
 
    display: block; 
 
    animation: 1s slideDown forwards; 
 
} 
 

 
@keyframes slideDown { 
 
    0% { 
 
    transform: translate3d(0px, -200px, 0px); 
 
    opacity: 0; 
 
    z-index:-1; 
 
    } 
 
    99% { 
 
    transform: translate3d(0px, 0px, 0px); 
 
    opacity: 1; 
 
    z-index:-1; 
 
    } 
 
    100% { 
 
    z-index:0; 
 
    } 
 
} 
 

 
/* presentational */ 
 
body { 
 
    font: 18px/1.4 sans-serif; 
 
} 
 

 
nav a { 
 
    color: #E00; 
 
    display: block; 
 
    padding: 0.5em 1em; 
 
    text-decoration: none; 
 
} 
 
nav a:hover { 
 
    color: #F55; 
 
} 
 
nav ul, nav ul li { 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
nav > ul { 
 
    background: #EEE; 
 
    text-align: center; 
 
} 
 
nav > ul > li { 
 
    display: inline-block; 
 
    border-left: solid 1px #aaa; 
 
} 
 
nav > ul > li:first-child { 
 
    border-left: none; 
 
} 
 

 
.sub-menu { 
 
    background: #DDD; 
 
}

<nav> 
 
    <ul> 
 
    <li class="sub-menu-parent"> 
 
     <a href="#">Menu Item 1</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
     <li><a href="#">Sub Item 2</a></li> 
 
     <li><a href="#">Sub Item 3</a></li> 
 
     <li><a href="#">Sub Item 4</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="sub-menu-parent"><a href="#">Menu Item 2</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
     <li><a href="#">Sub Item 2</a></li> 
 
     <li><a href="#">Sub Item 3</a></li> 
 
     <li><a href="#">Sub Item 4</a></li> 
 
     <li><a href="#">Sub Item 5</a></li> 
 
     <li><a href="#">Sub Item 6</a></li> 
 
     </ul> 
 
    </li> 
 
    <li class="sub-menu-parent"><a href="#">Menu Item 3</a> 
 
     <ul class="sub-menu"> 
 
     <li><a href="#">Sub Item 1</a></li> 
 
     <li><a href="#">Sub Item 2</a></li> 
 
     </ul></li> 
 
    </ul> 
 
</nav>