实现tab标签滑动显示效果 vue组件 transform: translateX

接了公司一个大屏的任务，其中一个tab标签，虽然UI没说需要啥效果，但是我还是想做的好看一点

回头视频服务器回复我在上传一下gif版本的；

大概思路也是借鉴了这两篇文章；
实现tab标签下选中条滑动效果-react组件
element-ui框架源码阅读之tabs标签页

大概原理就是：

1. 通过mounted 获取整个tabs的高度，作为动态值；
2. 在mounted，利用list的forEach，动态获取每个dom的宽度，并将动态条移动的初始位置计算出来
3. 将值直接塞给原数组的item，点击click的时候，塞给当前值currentTab，通过tab自己去给动态条设置宽度及起始点。
4. 如此即实现了图中效果。
5. transform: translateX 是主要动画效果。
6. 

<template>
  <div class="tabs-class d-flex" ref="home">
    <div
      class="tab-item"
      :class="{
    'tab-item-click ':current(index)}"
      v-for="(item, index) in tabsList"
      :key="index"
      :ref="`id${index}`"
      :id="`id${index}`"
      @click="tabClick(item, index, `id${index}`)"
    >{
  { item.label }}</div>
    <div
      class=