【css js vue】超详细！！实现 tab菜单 动态滑动效果

前言
最近产品经理给我提了个新需求，希望能实现tab菜单切换时的滑动效果。

上面这是我做的效果图，在查找了一些资料之后，发现实现起来并没有特别的麻烦，但是对于我这种CSS学的不是很好的人，前期看起来还是有点懵的，所以写篇文章记录下我最终实现的效果。
一、实现思路

一般来说，实现这样的菜单我们最常用的是flex布局,我就默认你用的是这个。然后我们会为flex box里的每个item都绑上一个点击事件，这样在切换菜单的时候能展示不同的数据。

为了实现滑动门的效果，核心在于三点：

1.核心一
除了所有的菜单项，我们需要额外增加一个div设置成滑来滑去的滑动门。重点是，需要用到CSS的positon:absolute为滑动门固定位置，每切换一次菜单，都会调整div的左边的间距。 比如当我点击第一个菜单，这个滑动门的左间距是100px，点击第二个菜单，间距变成了200px，依此类推。

 .bg {
        ...
        position: absolute;
        cursor: pointer;
        left: 140px; //控制滑动门的左间距
        ....
      }

2.核心二
我们需要用到CSS的动画效果，来实现延迟。

 .bg {
       ...
        transition: all .5s;  //CSS过渡动画
        ...
      }

3.核心三
由于我们设定了position为absolute，滑动门已经脱离文档流了，因此需要用z-index设置层级。需要把 滑动门的z-index设置的靠屏幕里，flexbox的z-index设置的靠屏幕外。越小越靠近屏幕里

 .bg {
       ...
        z-index: 1;
       ...
      }

二、完整代码
1.html
代码如下（示例）：

下面的代码比较容易懂，我想唯一值得解释的是，:class="{ 'ac': active == item }",当active == item的时候返回true，即class='{ac:true}'那么这个div就有ac属性了。

<div class="tabs_box">
       //这里我用v-for遍历了菜单栏
        <div class="tab_item" :class="{ 'ac': active == item }" v-for="item in siteArr" :key="item"
          @click="handleClick(item)">{{ item }}</div>
          //这行代码大家不难发现，有几个菜单，我们的滑动块就有几个left属性，可能写的有点笨，大佬可以在评论区给我更好的建议。
        <div class="bg" :class="{ 'left1': active == siteArr[1] , 'left2': active == siteArr[2],'left3': active == siteArr[3],'left4': active == siteArr[4]}"></div>
      </div>

2.css
代码如下（示例）：

.tabs_box {
      color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 40px;
      border-radius: 30px;
      background: #4186f5;

      .tab_item {
        z-index: 2; //设置层级非常重要，不然你会发现滑块跑到文字上方了
        cursor: pointer;
        width: 18%;
        height: 100%;
        line-height: 40px;
        text-align: center;
      }
      //这行代码其实是用来给我们在激活菜单的时候切换字体颜色的
      .ac {
        color: #fff;
      }

      .bg {
        position: absolute; //绝对定位
        cursor: pointer;
        left: 140px;
        top: 49px;
        z-index: 1; //改变层级，置于底层才不会遮挡文字
        width: 18%;
        height: 40px;
        background: #FF9900;
        box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
        transition: all .5s; //实现动画效果
      }
      //改变滑块左边的距离
      .left1 {
        left: 450px;
      }
      .left2 {
        left: 760px;
      }
      .left3 {
        left: 1080px;
      }
      //因为我有四个菜单
      .left4 {
        left: 1390px;
      }
    }