文章目录
- 前言
- 一、实现思路
- 1.核心一
- 2.核心二
- 3.核心三
- 二、完整代码
- 1.html
- 2.css
- 总结
前言
提示：本文使用vue3技术，且仅介绍滑动效果的实现：
最近产品经理给我提了个新需求，希望能实现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;
}
}
总结
我讲述的应该是比较详细了，相信大家看了应该也能实现滑动功能。 但是有一些内容我感觉写的比较繁琐，比如 每次切换的时候，也许聪明的你能用js函数实现left值的改变。大家一起加油
