tabs下划线点击跟随效果该怎样实现？

Question

element-ui的结构是这样的

<div class="tabs__nav">
    <div class="tabs__active-bar"></div>
    <div class="tabs__item is-top">首页</div>
    <div class="tabs__item is-top">新闻</div>
    <div class="tabs__item is-top">视频</div>
</div>

tabs标签页基础用法
我的疑问点是.tabs__active-bar的 transform: translateX(0px)的距离是怎样获取的

Answer 1

获取对应的tabs__item相对父元素的位置。