clientWidth 设置给下划线
一、基本结构
{:;:;:;:;
}.nav-underline {<span style="color: #ff0000;">
position:<span style="color: #0000ff;"> absolute;<span style="color: #ff0000;">
bottom:<span style="color: #0000ff;"> 0;<span style="color: #ff0000;">
display:<span style="color: #0000ff;"> block;<span style="color: #ff0000;">
height:<span style="color: #0000ff;"> 2px;<span style="color: #ff0000;">
background-color:<span style="color: #0000ff;"> #000;<span style="color: #ff0000;">
transition:<span style="color: #0000ff;"> all .2s ease-out;
}
position:<span style="color: #0000ff;"> absolute;<span style="color: #ff0000;">
bottom:<span style="color: #0000ff;"> 0;<span style="color: #ff0000;">
display:<span style="color: #0000ff;"> block;<span style="color: #ff0000;">
height:<span style="color: #0000ff;"> 2px;<span style="color: #ff0000;">
background-color:<span style="color: #0000ff;"> #000;<span style="color: #ff0000;">
transition:<span style="color: #0000ff;"> all .2s ease-out;
}
二、移动下划线
mouseenter 事件,获取当前元素
event.target 就有问题
,然后根据 v-for 的 index 去查找对应的导航元素
设置为下划线的宽度
() {
.currentNav =.currentNavStyle = ()
}, () {
childNodes =
width =].clientWidth
left =
(index >
(let i = ; i < ; i+++=
computed 里面动态修改下划线样式
三、完善激活状态
() {
.activeNav =.activeNavStyle = ()
}
navLineStyle() 做了兼容处理,所以只需要在鼠标移出的时候,清空 currentNavStyle 即可
() {
.currentNavStyle =
四、纯CSS实现下划线跟随
{:;:;&:<span style="color: #0000ff;">:after {
content: '';<span style="color: #ff0000;">
position:<span style="color: #0000ff;"> absolute;<span style="color: #ff0000;">
bottom:<span style="color: #0000ff;"> 0;<span style="color: #ff0000;">
left:<span style="color: #0000ff;"> 100%;<span style="color: #ff0000;">
width:<span style="color: #0000ff;"> 0;<span style="color: #ff0000;">
height:<span style="color: #0000ff;"> 2px;<span style="color: #ff0000;">
background-color:<span style="color: #0000ff;"> #000;<span style="color: #ff0000;">
transition:<span style="color: #0000ff;"> all 0.3s ease-out;
}<span style="color: #800000;">
}
content: '';<span style="color: #ff0000;">
position:<span style="color: #0000ff;"> absolute;<span style="color: #ff0000;">
bottom:<span style="color: #0000ff;"> 0;<span style="color: #ff0000;">
left:<span style="color: #0000ff;"> 100%;<span style="color: #ff0000;">
width:<span style="color: #0000ff;"> 0;<span style="color: #ff0000;">
height:<span style="color: #0000ff;"> 2px;<span style="color: #ff0000;">
background-color:<span style="color: #0000ff;"> #000;<span style="color: #ff0000;">
transition:<span style="color: #0000ff;"> all 0.3s ease-out;
}<span style="color: #800000;">
}
width: 0; left: 100%; 这是为了让下划线默认从右向左出现,然后从左向右消失
width: 100%; left: 0;
{:;:;
}
& + .nav::after </span>{<span style="color: #ff0000;">
left</span>:<span style="color: #0000ff;"> 0</span>;
}<span style="color: #800000;">
}
}
从而实现相邻下划线 after 能,动画连起来就像是下划线跟随鼠标滑动了
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。