需求
实现顶部菜单栏，切换时下划线跟随滑动
效果
点击下划线跟随动画
思路
看效果，思路有2：
- 方案A：下划线
- 设置下划线 border-bottom
- 点击标题后控制下划线的展示隐藏
- 注：下划线长度及圆角无法设置
- 方案B：模拟下划线
- 新启元素模，使用背景色拟下划线效果
- 点击标题后，计算要滑动的距离
- css3动画移动到目标位置
以上方案对比，发现方案1缺点较大，例如无法控制下划线长度，圆角，以及下划线渐变色等。因此采用方案2处理。
实现步骤
本案例基于vue实现
1. 基础布局
<div id="app">
<div class="nav">
<!-- 标题列表 -->
<div class="nav-list">
<div v-for="(item, index) in navList" :key="item">
{{ item }}
</div>
</div>
<!-- 下划线 -->
<div class="nav-line">
<div :style="{transform: 'translateX(' + translateX + 'px) translateX(-50%)',}"></div>
</div>
</div>
</div>
.nav {
width: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background: #fff;
}
.nav .nav-list {
margin: 0 auto;
max-width: 600Px;
display: flex;
justify-content: space-around;
align-items: center;
height: 44px;
}
.nav .nav-list>div {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC, sans-serif;
font-weight: 400;
color: #666;
line-height: 16px;
cursor: pointer;
text-align: center;
}
.nav-line {
margin: 0 auto;
}
.nav-line>div {
width: 18px;
height: 4px;
border-radius: 2px;
transition-duration: 0.3s;
position: relative;
top: -7px;
}
data: {
navList: ['首页', '推荐', '关注', '会员', '消息'],
translateX: 0
},
运行如下：
基础布局
2. 添加点击切换事件及激活的菜单加粗
<!-- 标题列表 -->
<div class="nav-list">
<div v-for="(item, index) in navList" :key="item"
+ @click="changeTitle(index)"
+ :class="{ 'nav-list--active': index === active }"
>
{{ item }}
</div>
</div>
/* 新增激活状态样式 */
.nav .nav-list .nav-list--active {
font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
font-weight: bold;
color: #333333;
transition: all 0.3s;
}
data: {
navList: ['首页', '推荐', '关注', '会员', '消息'],
active: 0,
translateX: 0
},
methods: {
/**
* 点击切换标题
* @param {number} index 菜单序列(点击的第index个)
*/
changeTitle(index) {
this.active = index;
this.setUnderLine();
},
/**
* 设置下划线
*/
setUnderLine() {
// 按照步骤2设置下划线
}
},
3. 设置下划线
/**
* 设置下划线
*/
setUnderLine() {
+ // 屏幕宽
+ let width = document.documentElement.clientWidth;
+ // 每个菜单所占宽度 = 屏宽 / 菜单个数
+ let slidingWidth = (width / this.navList.length).toFixed(2);
+ // 半个菜单宽度 （为了将下划线与菜单对齐）
+ let halfSlidingWidth = (slidingWidth / 2).toFixed(2);
+ // 水平位移目的坐标 = 半个菜单宽度 + (菜单宽 x 当前所在的index)
+ this.translateX = Number(halfSlidingWidth) + Number(slidingWidth * this.active);
}
实现如下效果：
初具雏形
4. bug处理
如上所示，点击后的效果完成了，但是在初始化的时候，会发现依然有问题。解决方案是在页面加载后先执行一次setUnderLine方法。
+ mounted() {
+ this.setUnderLine();
+ }
5. 优化
上述方案已基本满足需求，现提出优化方案：将标题文字及下划线采用渐变色处理
优化内容：
- 下划线渐变色
- 标题文字渐变色
- 根据标题个数自适应【已完成】
由于我们在处理的平移距离的时候已经是根据标题个数长度去处理，因此优化3已完成。
5.1 下划线渐变
由于下划线是背景色填充的，因此可直接修改背景色为渐变色：
.nav-line>div {
width: 18px;
height: 4px;
background-color: #4158D0;
+ background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
border-radius: 2px;
transition-duration: 0.3s;
position: relative;
top: -7px;
}
5.2 文字颜色渐变
.nav .nav-list>div {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC, sans-serif;
font-weight: 400;
color: #666;
line-height: 16px;
cursor: pointer;
text-align: center;
+ background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
}
5.3 激活文字改颜色
.nav .nav-list .nav-list--active {
font-family: PingFangSC-Semibold, PingFang SC, sans-serif;
font-weight: bold;
color: #333333;
transition: all 0.3s;
+ background-color: #FFE53B;
+ background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 74%);
}
最终完成图例效果
最终效果
完整代码关注W信G众号【流眸】回复【21601】获取
小结
案例通过新增元素div来模拟下划线，点击时计算水平方向的目的坐标，通过CSS动画实现效果。实现方式难度适中，效果良好，并且可以在一定程度上进行优化扩展。
