先放一个最终实现的效果图。
首先我们先把 dom 结构写出来:
1
2
3
4
5
6
7
8
9
10
11
下面我们来分析如何实现上述效果。
首先我们把鼠标放到任意一个菜单上,该菜单的底部都会出现一条从右到左的线。这个比较好实现:
1
2
3
4
5
6
7
8
9
10
11
12
13
14ul li::before {
content: '';
position: absolute;
left: 100%;
bottom: 0;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
transition: left .2s, width .2s;
}
ul li:hover {
left: 0;
width: 100%;
}
这个时候的效果是这样的:
我们看到,当我们从左面一个菜单移动到右面一个菜单时,左面菜单下面的线隐藏的方向是对的,而右面菜单下面的线出现的方向却是错的。这个时候就需要一个神奇的 css 选择符来处理这种情况:~
这里简单解释下 ~ 选择符的作用:
1
2
3p ~ ul {
/* blablabla */
}
代表 p 标签后的所有 ul 标签。
如此我们可以这样处理上面的问题:
1
2
3ul li:hover ~ li::before {
left: -100%;
}
加上上面的代码后,就可以实现本文开始所示的效果了。
但是,我想你已经发现一个问题了,没错,第一次将鼠标 hover 到菜单上时,底下的线是从右向左出现的,这与我们读书时的方向是不一致的。
你可能会问,为什么一开始的时候不让线就是从左向右出现呢?
首先我们来思考之所以能用纯 css 实现这种效果最大的限制条件:那就是 ~ 选择符。
~ 选择符是有方向的,那就是只能选择后面的元素。我们现在考虑从第一个菜单滑动到第二个菜单时发生了什么:
首先当我们将鼠标放到第一个菜单上时,不论是先从左面出现还是先从右面出现,都可以实现,但当我们将鼠标从第一个菜单移动到第二个菜单时,第一个菜单的线必须从左向右消失。这则决定了首次放到菜单上时,底部的线只能是从右向左出现,只有这样才能在离开时从左向右消失。
既然所有的菜单都是设定为从右向左出现,当我们将鼠标从第一个菜单移动到第二个时,第一个菜单表现正常:从左向右消失,但第二个菜单则会和第一个菜单一样从右向左出现。这不是我们想要的效果。好在有 ~ 选择符可以让我们 hover 在第一个菜单上时,改变后面的菜单出现方向。
现在应该明白了,因为 ~ 只能选择后面的元素,所以无法实现首次从左向右出现的效果。那如果有一个和 ~ 相反的选择器岂不是就可以了吗?bingo!
是的,如果你这么想大概就已经理解我的意思了,不过可惜的是,并没有这么一种选择器(个人没有查到,若有望告知)。
那这个瑕疵就不能解决了吗?
可以的,这个问题我也考虑了很久,最后突然灵光一现,想到了 flex 的一个属性: flex-direction: row-reverse。
如果使用 flex 的属性的话,可以将 dom 元素反转渲染,这个时候 ~ 选择符表示的含义不正好相反吗?
感觉自己机智的一笔,哈哈。
说干就干,需要注意的是,reverse 后,dom 的顺序在书写时也要反转下,然后就是之前的 left 控制动画要相应的改成 right:
1
2
3
4
5
6
7
8
9
- Settings
- Insights
- Wiki
- Projects
- Pull requests
- Issues
- Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21ul {
flex-direction: row-reverse;
justify-content: flex-end;
}
ul li::before {
content: '';
position: absolute;
right: 100%;
bottom: 0;
width: 0;
height: 100%;
border-bottom: 2px solid #000;
transition: right .2s, width .2s;
}
ul li:hover::before {
right: 0;
width: 100%;
}
ul li:hover ~ li::before {
right: -100%;
}
效果如下所示: