vue Tab切换带动画

<div class="follow_bc">
<div class="tab_two">
                    <div
                        @click="tabClick(item.id, i)"
                        v-for="(item, i) in tabsList"
                        :key="i"
                        ref="label"
                        :class="item.id === groupId ? 'active' : ''"
                        class="second_tab"
                    >
                        {{ item.name }}
                    </div>
                 
                </div>
                <div class="bottom_line" v-if="tabsList.length"></div>
           </div>
            <div v-show="groupId === 0">1内容</div>
            <div v-show="groupId === 1">2内容</div>
            <div v-show="groupId === 2">3内容</div>

以上是Html代码。

以下是css 代码

// tab切换
.follow_bc {
    width: 100%;
    margin-top: 10px;
    position: relative;
}
.first_tab {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
    cursor: pointer;
}
.bottom_line {
    width: 93px;
    height: 2px;
    background: linear-gradient(137deg, #ff9696 0%, #e55653 100%);
    box-shadow: 0px 1px 4px 0px rgba(215, 6, 3, 0.19);
    border-radius: 1px;
    border: 0px solid rgba(151, 151, 151, 0);
    position: absolute;
    margin-top: -9px;
    margin-left: 1px;
   
}
.second_tab {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
    line-height: 20px;
    cursor: pointer;
    width: 93px;
    display: flex;
    justify-content: center;
}



.tab_two {
    display: flex;
    padding: 20px 0px;
   
}
.tab_two div.active {
    color: #333;
    font-size: 20px;
    letter-spacing: 1px;
}
//tab切换

以下是js部分

data() {
        return {
           
            tabsList: [
                { name: 'tab1', id: 0 },
                { name: 'tab2', id: 1 },
                { name: 'tab3', id: 2 },
            ], //tabs的数组
            groupId: 0,
        };
    },



 //tab切换
        tabClick(id, i) {
            this.groupId = id;
            let doc = document.getElementsByClassName('bottom_line')[0];
            let left = this.$refs.label[i].offsetLeft + 'px'; //返回当前元素的相对水平偏移位置的偏移容器
           let width = this.$refs.label[i].clientWidth + 'px'; //	在页面上返回内容的可视宽度（不包括边框，边距或滚动条）
            doc.style.width = `${width}`;
            doc.style.transform = `translateX(${left})`;
            doc.style.transition = '.3s';
        },