jquery - 两个 CSS 选项卡下的动画线

Question

请我想知道如何使用 JS 或 Jquery 或 Vue 转换来创建像这样的动画，（我正在使用引导程序）。

当我点击 TAB2 时，我想将 TAB1 下的线向右移动。如何使 div 动画从左到右平滑移动，反之亦然？

这是我的代码：

<div class="col-md-12">
  <div class="col-md-6">
        <p>TAB1</p>
  </div>
  <div class="col-md-6">
        <p>TAB2</p>
  </div>
</div>
<div class="col-md-6">
<span style="height:10px;background-color:"></span>
</div>

标签： jquerycssvue.jsbootstrap-4

Answer 1

请尝试以下代码。我希望你能得到包括动画在内的解决方案。

.tab p {
    display: inline-block;
    margin-right: 30px;
    position: relative;
    margin-bottom: 0;
    font-size: 30px;
}
    
.tab p:last-child {
    margin-right: 0px;
}
    
.tab p:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 5px;
    background-color: #8C076E;
    -webkit-transition: .5s;
    transition: .5s
}
    
.tab p:hover:before {
    width: 100%
}

<div class="col-md-12">
    <div class="tab">
        <p>TAB1</p>
        <p>TAB2</p>
    </div>
</div>