【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;}}