vue菜单点击下划线跟随动画

需求

实现顶部菜单栏，切换时下划线跟随滑动

效果

点击下划线跟随动画

思路

看效果，思路有2：

1. 方案A：下划线
   • 设置下划线 border-bottom
   • 点击标题后控制下划线的展示隐藏
   • 注：下划线长度及圆角无法设置
2. 方案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. 优化

上述方案已基本满足需求，现提出优化方案：将标题文字及下划线采用渐变色处理

优化内容：

1. 下划线渐变色
2. 标题文字渐变色
3. 根据标题个数自适应【已完成】

由于我们在处理的平移距离的时候已经是根据标题个数长度去处理，因此优化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动画实现效果。实现方式难度适中，效果良好，并且可以在一定程度上进行优化扩展。