バニラのjavascriptまたはcssを使用して境界線をアニメーション化する方法

Question

border-bottomの色をグレーに設定し、transitonを.3sに追加し、 '：hover'エフェクトなので、色を青に変更します。問題はそれに関連しています。ホバー効果のある要素の上にマウスを置くと、境界線i（青色）が上から下に現れます（落下効果）。

this is it

今私のクライアントは、ホバーとの国境に左から右に出現する境界線が別のリスト項目のホバーに消えていくべきではありません望んでいる、それは（ボーダー）しようとしてカーソル「後ろの遅れ」に持っていますカーソルを「つかまえ」、次のリスト項目の境界位置を埋める。私はあなたが欲しいものを得ることを願っています。私はそれがCSSで行うことができないことを知っているが、私はjsでこれを行う方法がわからない、誰かがそれを手伝ってjQueryのようなフレームワークを使用せずに何をすべきか私にexpalainすることができます。

Answer 1

スティタは言ったように、widthプロパティを使用してアニメートすることができます。

ここでは、その効果のためにcodepenリンクを添付しました。

ul { 
 
    list-style-type: none; 
 
    border-bottom: 5px solid #eee; 
 
} 
 
ul li { 
 
    display: inline-block; 
 
    position: relative; 
 
    padding: 20px; 
 
} 
 
ul li:before { 
 
    content: ""; 
 
    position: absolute; 
 
    height: 5px; 
 
    width: 0px; 
 
    bottom: -5px; 
 
    left: 0; 
 
    background: blue; 
 
    transition: all linear 0.25s; 
 
} 
 

 
/* Expanding Animation Element */ 
 
ul li:hover:before { 
 
    width: 100% 
 
}

<div class="box"> 
 
    <ul> 
 
    <li>Homepage</li> 
 
    <li>Style Demo</li> 
 
    </ul> 
 
</div>