Unerwartete Animation, wenn versucht wird, die navbar von LESS zu Basic CSS zu kopieren

Question

Ich versuche, eine NAVBAR, die in LESS geschrieben ist, in Basic CSS zu kopieren, da ich gerade erst lerne.

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

mag ich die border-bottom die gleichen wie in weniger verhalten, aber ich bekomme eine Jitter/Animation, wenn ich versuche, es zu kopieren, wie auf .brand gesehen und wenn ich nicht die Eigenschaft line-height Ich bekomme den Rand nicht unten auf der Navigationsleiste. Auch wenn Sie auf die navbar-rechts-Klasse schauen, bekomme ich nicht den Rand-Boden, um das nächste Element zu erreichen. Der obige Rahmen wird nur die obige Klasse unterstreichen und nicht mit dem nächsten Element wie im Beispiel verbinden. Mein Versuch:

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

Answer 1

Der Grund, warum Sie nervös Animation auf Ihrem .brand Element sehen (die Ihren Namen als Text hat), weil line-height nicht Subpixel-Werte unterstützen (dh wenn Tweenen der Browser springt von einer ganzen Zahl zur anderen).

Was Sie tun können, ist tatsächlich ein Pseudo-Element zu erstellen, das absolut innerhalb des übergeordneten Elements positioniert ist. Sie wird nahe an den Text mit einem positiven Wert von bottom gesetzt, und beim Hover wird der Wert bottom auf 0 gesetzt, sodass er am unteren Rand des Elements bleibt.

.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; 
} 

Für einen Proof-of-Concept-Beispiel finden Sie das Snippet unten:

* { 
 
    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

Sie haben die CSS-Eigenschaften festlegen, die Sie wollen auf nicht animieren der normale Zustand, anstatt zu schweben.
Überprüfen Sie diesen Code Stift, ich habe die Zeilenhöhe und die unteren Randeigenschaften im Normalzustand festgelegt.

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

der Code lautet wie folgt:

.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; 
}