Faire un fondu après la transition css

Question

J'ai un problème avec la création d'un système de navigation sur mon site Web. Une fois que vous passez la souris sur la navigation, elle s'étend pour s'adapter aux catégories du site qui sont dans un ul. Je sais quel est le problème, parce que la largeur du parent du ul est trop petite pour contenir le texte, le texte doit rétrécir avant la transition.

Alors je me demandais, est-il un moyen de transitionner le texte une fois la largeur est animée. Ou y a-t-il d'autres solutions?

CSS:

.navigation { 
    width: 3.5vw; 
    height: 7vh; 
    background-color: #fcc101; 
    margin: 1vw; 
    border-radius: 4rem; 
    font-family: 'Work Sans', sans-serif; 
    transition: all 1s ease-in; 
    background-image: url('menu.svg'); 
    background-size: 30px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    position: fixed; 
    } 



    .navigation .ul a { 
    visibility: hidden; 
    opacity: 0; 
    transition: all 1s ease-in-out; 

    } 

    .navigation .ul { 
    visibility: hidden; 


    } 


    .navigation:hover { 
    width: 25vw; 
    border-radius: 3rem; 
    background-image: none; 
    background-size: 30px; 
    background-repeat: no-repeat; 
    background-position: center center; 
    } 

    .navigation:hover ul a { 
    opacity: 1; 
    visibility: visible; 
    } 


    li { 
    display: inline; 
    } 

    a { 
    color: white; 
    text-decoration: none; 
    font-size: 1.25rem; 
    } 

    .ul { 
    text-align: left; 
    line-height: 7vh; 
    padding-left: 2vw; 
    word-spacing: 1vw; 
    } 

Here est le site.

Merci.

Answer 1

Une solution pourrait être d'appliquer un animation-delay à votre ul qui est> = le temps d'exécution de vos autres animations. De cette façon, l'animation devrait seulement se déclencher une fois que l'autre est terminée.

animation-delay: 3s;

Quelque chose de semblable au-dessus devrait fonctionner très bien. Ou, si vous utilisez des transitions, vous pouvez utiliser la propriété transition-delay à la place!

transition-delay: 3s;

Answer 2

Eh bien, j'ai repéré quelques problèmes avec votre animation!

Le premier problème est que l'élément de menu "contact" apparaît sous les autres éléments du menu et que lorsque l'animation est encore en cours, les éléments du menu se trouvent sous l'autre. Pour résoudre ce problème, vous devez ajouter ceci:

.navigation .ul { 
    visibility: hidden; 
    position:absolute; /* We need a position absolute so it won't be effected by the size of the parent div */ 
    width:400px; /* Set the width to whatever works for you */ 
    } 

Comme pour retarder l'animation, vous pouvez ajouter ceci:

.navigation .ul { 
    visibility: hidden; 
    position:absolute; /* We need a position absolute so it won't be effected by the size of the parent div */ 
    width:400px; /* Set the width to whatever works for you */ 
    -webkit-transition-delay: 2s; /* You can set the delay to whatever you need */ 
    transition-delay: 2s; /* You can set the delay to whatever you need */ 
    } 

Je pense aussi que vous devriez peut-être faire l'animation un peu plus rapide et plus fluide, et peut-être l'avoir sur le clic au lieu de sur le vol stationnaire.