Animation inattendue lors de la tentative de copie de la barre de navigation de LESS vers le CSS de base

Question

Je suis en train de copier une barre de navigation qui est écrite en LESS en CSS de base car je ne fais que l'apprendre.

[https://codepen.io/mrmlnc/pen/gpKbXM][1] 

Je veux l'être border-bottom se comportent comme en moins, mais je reçois une gigue/animation lorsque je tente de le copier comme on le voit sur .marque et quand je ne pas utiliser la propriété line-height Je ne vois pas la bordure au bas de la barre de navigation. Aussi, quand vous regardez la classe navbar-right, je n'obtiens pas le border-bottom pour atteindre l'élément suivant. La bordure Au-dessus ne soulignera que la classe ci-dessus et ne se connectera pas à l'élément suivant comme dans l'exemple. Ma tentative:

https://codepen.io/atocx/pen/JyvaqY

Answer 1

La raison pour laquelle vous voyez l'animation énervement sur votre élément .brand (qui a votre nom comme le texte) est parce que la ligne de hauteur ne supporte pas les valeurs de sous-pixels (lorsque interpoler, le navigateur sauts d'un entier à l'autre).

Ce que vous pouvez faire est en réalité de créer un pseudo-élément qui est positionné absolument dans le parent. Il est positionné près du texte avec une valeur bottom positive, et lors du survol, la valeur bottom est définie sur 0 afin qu'elle reste en bas de l'élément.

.brand { 
    position: relative; 
    line-height: 64px; 
} 
.brand::before { 
    content: ''; 
    display: block; 
    position: absolute; 
    left: 0; 
    right: 0; 
    bottom: 20px; /* This is an arbitrarily decided value */ 
    opacity: 0; 
    border-bottom-style: solid; 
    border-bottom-color: #673ab7; 
    border-bottom-width: 4px; 
    transition: all 0.3s linear 0s; 
} 
.brand:hover::before { 
    bottom: 0; 
    opacity: 1; 
} 

Pour un exemple de preuve de concept, voir l'extrait ci-dessous:

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    font-family: Verdana, Arial, sans-serif; 
 
    line-height: 20px; 
 
} 
 

 
body { 
 
    background-color: #f5f5f5; 
 
    color: #333; 
 
} 
 

 
.menu-container { 
 
    background-color: #fff; 
 
    height: 64px; 
 
    border: #ddd; 
 
    display: flex; 
 
    justify-content: center; 
 
    /* Shadow needs position "relative" */ 
 
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.16); 
 
    position: relative; 
 
} 
 

 
.navbar { 
 
    /*border: 1px solid black;*/ 
 
    background-color: #fff; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    align-items: center; 
 
} 
 

 
.navbar-right { 
 
    width: 25%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-flow: row wrap; 
 
} 
 

 
.brand { 
 
    color: #555; 
 
    font-size: 14px; 
 
    text-decoration: none; 
 
    transition: all 0.3s linear 0s; 
 
    line-height: 64px; 
 
    position: relative; 
 
} 
 
.brand::before { 
 
    content: ''; 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 20px; 
 
    opacity: 0; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: #673ab7; 
 
    border-bottom-width: 4px; 
 
    transition: all 0.3s linear 0s; 
 
} 
 

 
.brand:hover { 
 
    color: #333; 
 
} 
 
.brand:hover::before { 
 
    bottom: 0; 
 
    opacity: 1; 
 
} 
 

 
.about { 
 
    color: #555; 
 
    border: transparent; 
 
    font-size: 14px; 
 
    border-width: 4px; 
 
    text-decoration: none; 
 
    transition: all 0.3s linear 0s; 
 
} 
 

 
.about:hover { 
 
    color: #333; 
 
    border-bottom-style: solid; 
 
    border-bottom-color: #673ab7; 
 
    border-bottom-width: 4px; 
 
    flex-shrink: 0; 
 
} 
 

 
.projects { 
 
    color: #555; 
 
    border: transparent; 
 
    font-size: 14px; 
 
    border-width: 4px; 
 
    text-decoration: none; 
 
    transition: all 0.3s linear 0s; 
 
} 
 

 
.projects:hover { 
 
    color: #333; 
 
} 
 

 
.contact { 
 
    color: #555; 
 
    border: transparent; 
 
    font-size: 14px; 
 
    border-width: 4px; 
 
    text-decoration: none; 
 
    transition: all 0.3s linear 0s; 
 
} 
 

 
.contact:hover { 
 
    color: #333; 
 
}

<header> 
 
    <nav class="menu-container"> 
 
    <div class="navbar"> 
 
     <a href="#" class="brand">Florian Dietrich</a> 
 
     <div class="navbar-right"> 
 
     <a href="#" class="about">About</a> 
 
     <a href="#" class="projects">Projects</a> 
 
     <a href="#" class="contact">Contact</a> 
 
     </div> 
 
    </div> 
 
    </nav> 
 
</header>

Answer 2

Vous devez définir les propriétés CSS que vous ne voulez pas animer le l'état normal, au lieu de stationnaire.
Cochez cette case, j'ai défini la hauteur de la ligne et les propriétés de la bordure inférieure à l'état normal.

https://codepen.io/bmax/pen/JyBWGa?editors=0100 

le code va comme ceci:

.brand { 
    color: #555; 
    border: transparent; 
    font-size: 14px; 
    border-bottom: 4px solid transparent; 
    text-decoration: none; 
    transition: all 0.3s linear 0s; 
    line-height: 64px; 
} 
.brand:hover { 
    color: #333; 
    border-bottom-style: solid; 
    border-bottom-color: #673ab7; 
}