La transition CSS se termine trop tôt lorsque la souris quitte l'élément

Question

Je travaille sur un menu pour mon site. C'est déjà fait, il y a juste un petit détail qui ne cesse de m'énerver. Jetez un oeil à l'extrait ci-dessous. Lorsque je survole l'élément parent, l'enfant glisse avec la transition. Mais une fois que la souris quitte l'élément parent/enfant, l'élément enfant va simplement disparaître.

J'ai déterminé que lorsque la souris quitte l'élément parent/enfant, l'élément enfant se déplace rapidement hors de la vue (left: -9999px;) avant le début de la transition vers le haut. Comment puis-je faire en sorte que lorsque la souris quitte le menu, l'élément glisse avec le même type de transition? Existe-t-il une solution uniquement CSS ou dois-je également utiliser jQuery?

ul { 
 
    list-style: none; 
 
    padding: 0; 
 
} 
 

 
li { 
 
    width: 180px; 
 
} 
 

 
#menu ul ul { 
 
    left: -9999px; 
 
    position: absolute; 
 
    background: red none repeat scroll 0 0; 
 
} 
 

 
#menu li:hover>ul { 
 
    left: auto; 
 
} 
 

 
#menu ul ul li { 
 
    height: 0; 
 
    transition: height 0.2s ease 0s; 
 
} 
 

 
#menu ul ul ul { 
 
    margin-left: 100%; 
 
    top: 0; 
 
} 
 

 
#menu ul li:hover>ul>li { 
 
    height: 32px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="menu"> 
 
    <ul> 
 
    <li>Parent Item 
 
     <ul> 
 
     <li>Child Item 
 
      <ul> 
 
      <li>Child Child Item</li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 1

Enlever la propriété à gauche et utilisez overflow: hidden Aussi, je ne pense pas que l'option "auto" avec des œuvres transition. Il apparaîtra automatiquement en utilisant cet attribut.

#menu ul ul { 
 
    position: absolute; 
 
    overflow: hidden; 
 
    background: red none repeat scroll 0 0; 
 
} 
 

 
#menu li:hover>ul { 
 
    
 
} 
 

 
#menu ul ul li { 
 
    height: 0; 
 
    transition: height 0.2s ease 0s; 
 
} 
 

 
#menu ul li:hover>ul>li { 
 
    height: 32px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="menu"> 
 
    <ul> 
 
    <li>Parent Item 
 
     <ul> 
 
     <li>Child Item</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 2

Vous pouvez ajouter un transition-delay sur l'état régulier. Par exemple avec 1s délai.

position:relative est ajouté au parent li, donc left:auto; peut être transformé en left:0; afin d'appliquer transition.

#menu ul ul { 
 
    left: -9999px; 
 
    position: absolute; 
 
    background: red none repeat scroll 0 0; 
 
    transition:0s 1s;/* set a delay */ 
 
} 
 
#menu ul li{ 
 
position:relative; 
 
} 
 
#menu li:hover>ul { 
 
    left: 0; 
 
    transition:0s 0s;/* reset delay */ 
 
} 
 

 
#menu ul ul li { 
 
    height: 0; 
 
    transition: height 0.2s ease 1s;/* set a delay */ 
 
} 
 

 
#menu ul li:hover>ul>li { 
 
    height: 32px; 
 
    transition: height 0.2s ease 0s;/* reset delay */ 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="menu"> 
 
    <ul> 
 
    <li>Parent Item 
 
     <ul> 
 
     <li>Child Item</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>

Answer 3

Je supprimerait la propriété left, et que la transition height. Cela fonctionnera si vous utilisez également la propriété overflow.

#menu li ul { 
 
    height: 0px; 
 
    overflow: hidden; 
 
    background: red none repeat scroll 0 0; 
 
    transition: height 0.2s ease 0s; 
 
    position: absolute; 
 
} 
 

 
#menu ul li:hover>ul { 
 
    height: 32px; 
 
    overflow: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<nav id="menu"> 
 
    <ul> 
 
    <li>Parent Item 
 
     <ul> 
 
     <li>Child Item</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</nav>