ホバー変換のジッターCSS

Question

ホバープロパティでCSSのtransformYを使用すると、ユーザーがナビゲーション要素の上部にマウスを置くと、ホバーが検出されたときにボックスが移動し、 hoverプロパティが削除され、変換が削除されます。私はこのジッタが起こらないようにいくつかの助けをしたいと思いますが、それでも個々のタブ移動を達成しました。私はこれを達成するためにブートストラップと自分のコードの組み合わせを使用しています。

あなたは私が何を意味するかのデモをここで見ることができます。

https://jsfiddle.net/b5vjw9wk/1/

HTML：

<nav class="navbar navbar-full navbar-default navbar-bottom navbar-drop-shadow"> 
    <div class="container-fluid"> 
    <div class="row-flex-nav"> 
     <div class="col-flex-3 center active-nav" id="NewHires"> 
     <h4>Active Nav</h4> 
     </div> 
     <div class="col-flex-3 center non-active-nav" id="Transfers"> 
     <h4>Non Active</h4> 
     </div> 
     <div class="col-flex-3 center non-active-nav" id="Leaving"> 
     <h4>Non Active</h4> 
     </div> 
    </div> 
    </div> 
</nav> 

はCSS：

.navbar { 
    background-color: rgb(110,14,24); 
    border: 0px; 
} 
.navbar-drop-shadow { 
    -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75); 
      box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75); 
} 
.non-active-nav { 
    color: white; 
    -webkit-transition: transform .06s; /* Safari */ 
    transition: transform .06s; 
} 
.non-active-nav:hover { 
    background: rgb(110,14,24); 
    -webkit-box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75); 
    -moz-box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75); 
      box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75); 
    transform: translateY(10px); 
    border-radius: 3px; 
} 
html, body { 
    background: rgb(75,75,75); 
} 
.active-nav{ 
    color: white; 
    background: rgb(75,75,75); 
    -moz-box-shadow: inset 0 7px 9px -5px rgba(0,0,0,0.75); 
    -webkit-box-shadow: inset 0 7px 9px -5px rgba(0,0,0,0.75); 
    box-shadow:   inset 0 7px 9px -5px rgba(0,0,0,0.75); 
    transform: translateY(10px); 
} 
.navbar-bottom { 
    min-height: 25px; 
} 
.center { 
    text-align: center; 
} 

.no-margin{ 
    margin: 0px; 
} 

.row-flex-nav { 
    width: 100%; 
    display: -webkit-flex; 
    display: flex; 
    flex-wrap: wrap; 
} 

.col-flex-3 { 
    flex-grow: 1; 
    width: 33.33%; 
} 

あなたが与えることができる任意の助けをいただければ幸いです

Answer 1

前に使用した手法の1つは、透明な境界線と負のマージンを要素の上部に追加することで、要素が遷移するときにその要素を移動することは不可能です。

.non-active-nav { 
    color: white; 
    -webkit-transition: transform .06s; /* Safari */ 
    transition: transform .06s; 

    border-top: 10px solid transparent; 
    margin-top: -10px; /* equal to border width */ 
} 

例：

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"); 
 

 
.navbar { 
 
\t background-color: rgb(110,14,24); 
 
\t border: 0px; 
 
} 
 
.navbar-drop-shadow { 
 
\t -webkit-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75); 
 
\t -moz-box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75); 
 
\t \t \t box-shadow: 0 8px 6px -6px rgba(0,0,0,0.75); 
 
} 
 
.non-active-nav { 
 
\t color: white; 
 
\t -webkit-transition: transform .06s; /* Safari */ 
 
    transition: transform .06s; 
 
    border-top: 10px solid transparent; 
 
    margin-top: -10px; 
 
} 
 
.non-active-nav:hover { 
 
\t background: rgb(110,14,24); 
 
\t -webkit-box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75); 
 
\t -moz-box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75); 
 
\t \t \t box-shadow: 0 6px 4px -3px rgba(0,0,0,0.75); 
 
\t transform: translateY(10px); 
 
\t border-radius: 3px; 
 
} 
 
html, body { 
 
\t background: rgb(75,75,75); 
 
} 
 
.active-nav{ 
 
\t color: white; 
 
\t background: rgb(75,75,75); 
 
\t -moz-box-shadow: inset 0 7px 9px -5px rgba(0,0,0,0.75); 
 
    -webkit-box-shadow: inset 0 7px 9px -5px rgba(0,0,0,0.75); 
 
    box-shadow:   inset 0 7px 9px -5px rgba(0,0,0,0.75); 
 
    transform: translateY(10px); 
 
} 
 
.navbar-bottom { 
 
\t min-height: 25px; 
 
} 
 
.center { 
 
\t text-align: center; 
 
} 
 

 
.no-margin{ 
 
\t margin: 0px; 
 
} 
 

 
.row-flex-nav { 
 
\t width: 100%; 
 
    display: -webkit-flex; 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
} 
 

 
.col-flex-3 { 
 
\t flex-grow: 1; 
 
\t width: 33.33%; 
 
}

<nav class="navbar navbar-full navbar-default navbar-bottom navbar-drop-shadow"> 
 
    <div class="container-fluid"> 
 
    <div class="row-flex-nav"> 
 
     <div class="col-flex-3 center active-nav" id="NewHires"> 
 
     <h4>Active Nav</h4> 
 
     </div> 
 
     <div class="col-flex-3 center non-active-nav" id="Transfers"> 
 
     <h4>Non Active</h4> 
 
     </div> 
 
     <div class="col-flex-3 center non-active-nav" id="Leaving"> 
 
     <h4>Non Active</h4> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</nav>

Updated Fiddle