You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
97 lines
2.7 KiB
97 lines
2.7 KiB
2 years ago
|
# hover-visible的原理及使用方式
|
||
|
|
|
||
|
|
常见的交互场景,某个元素在一般情况下隐藏,当鼠标悬浮到父元素上之后,该元素显示
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
FineUI中提供了两种方式实现这种效果,分开举例
|
||
|
|
|
||
|
|
# less .hover-visible() mixin
|
||
|
|
|
||
|
|
## 源码分析
|
||
|
|
|
||
|
|
利用less强大的混合功能,默认状态`visibility:hidden`,在父级容器hover时状态变成`visibility:visible`
|
||
|
|
|
||
|
|
```less
|
||
|
|
.hover-visible(@cls) {
|
||
|
|
& .@{cls} {
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
&:hover {
|
||
|
|
& .@{cls} {
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## 应用示例
|
||
|
|
|
||
|
|
在编写less代码时,只需要在对应父级class下面加入`.hover-visible()`mixin即可
|
||
|
|
|
||
|
|
```less
|
||
|
|
.my-demo {
|
||
|
|
.hover-visible(add-button);
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
编译为css
|
||
|
|
```css
|
||
|
|
.my-demo .add-button {
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
.my-demo:hover .add-button {
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
## .hover-visible有什么缺陷吗?
|
||
|
|
|
||
|
|
众所周知,`visibility:hidden`仅仅隐藏了元素,但依旧占据文档流位置的,入下图所示,这样白白浪费了节点右侧可以利用的空间,体验不好.
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
为了应对这种非常常见的场景,FineUI提供了一套样式方案:
|
||
|
|
|
||
|
|
# .hover-visible-container .hover-visible-item
|
||
|
|
|
||
|
|
兄弟搭配,其力断金.一套class类名组合,提升编码效率.
|
||
|
|
|
||
|
|
## 源码分析
|
||
|
|
|
||
|
|
首先,基于`visibility:hidden`的不足,我们期望元素隐藏时能够`display:none`,父级元素hover时正常显示出来.
|
||
|
|
|
||
|
|
借助css3 `:where`和`:not`伪类,我们巧妙的实现了这一功能
|
||
|
|
|
||
|
|
```less
|
||
|
|
.bi-hover-visible-container {
|
||
|
|
|
||
|
|
& .bi-hover-visible-item {
|
||
|
|
visibility: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover .bi-hover-visible-item {
|
||
|
|
visibility: visible;
|
||
|
|
}
|
||
|
|
|
||
|
|
&:where(:not(&:hover)) .bi-hover-visible-item {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
用通俗语音解释,前两天规则很容易理解:默认状态`bi-hover-visible-item`隐藏,父节点hover时`bi-hover-visible-item`显示
|
||
|
|
最后一条是什么含义呢?
|
||
|
|
当父节点`bi-hover-visible-container`没被hover的时候,子节点`bi-hover-visible-item`的样式为`display: none`
|
||
|
|
|
||
|
|
这样一来,是不是完美了,正常状态被隐藏的元素不占据dom空间,当hover的时候,由于失去了`display: none`规则,那么其恢复成了原始的状态,`display:block`或`display:flex`,重新占据文档流
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## IE浏览器上需要注意的点
|
||
|
|
|
||
|
|
由于IE浏览器不支持`:where`和`:not`,因此在IE上始终占据空间
|
||
|
|
其次对于使用`bi-hover-visible-container`和`bi-hover-visible-item`组合类名的形式,在IE上不能嵌套使用.
|
||
|
|
`.bi-hover-visible-container` > `.bi-hover-visible-item` > `.bi-hover-visible-container` > `.bi-hover-visible-item` 的组合是不行的
|
||
|
|
对于这种场景,可以采用原始的less方法`.hover-visible()`处理
|