实现边框丝滑移动效果

切图仔

发布于 2022-09-14 16:24:08

3840

发布于 2022-09-14 16:24:08

HTML结构

<ul class="menus">
    <div class="active-border"></div>
    <li class="menu-item" >菜单项一</li>
    <li class="menu-item" >菜单项二</li>
    <li class="menu-item" >菜单项三</li>
</ul>

给.menus添加一个下边框做打底

.menus::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background-color: #eee;
    z-index: 99;
}

激活边框样式

.menus { position:relative }
.active-border {
    position: absolute;
    bottom: -2px;
    left: 0;
    z-index: 100;
    height: 2px;
    width: 100px; // 动态设置
    background: #ff7a1c;
    transition: transform .3s cubic-bezier(.645,.045,.355,1);
    transform: translateX(590px);// 动态设置
}

动画实现思路

当菜单项被点击的时候设置active-border的宽度为被点击菜单项的宽度同时获取menus相对于body的位置，当前被点击菜单项的位置

active-border的translateX值 = 当前被点击菜单项的X坐标 - menus的X坐标

关键代码

let curMenuRect = document.querySelectorAll(".menus li")[index].getClientRects()[0]
let MentBoxRect = document.querySelectorAll(".menus")[0].getClientRects()[0]
this.activeBorderWidth = e.path[0].clientWidth; // active-border的宽度
this.activeBorderX = Math.abs(curMenuRect.x - MentBoxRect.x) // active-border的X坐标

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-11-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除

html