两个CSS标签下的动画行

Question

[我想知道如何使用JS或Jquery或Vue Transitions创建这样的动画，（我正在使用bootstrap）。

单击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>

Answer 1

[如果要执行此操作，请同时使用两个按钮下的div和position:relative标签，然后使用所需的宽度作为该div的子级，并将其赋予position:absolute。只需在悬停和聚焦或您需要的伪类希望您理解它的位置上调整左右值即可。

Answer 2

我已经使用了这个简单的跨浏览器CSS库来创建许多动画。希望这可以帮助您解决问题。（您可以在文本的外面做一个div并为其底部边框添加动画效果，以便从左向右平滑移动）只需使用它并制作动画[]

animate.css

Answer 3

请在下面尝试使用此代码。希望您能获得包括动画在内的解决方案。