关于前端:CSS-实现超过固定高度后出现展开折叠按钮

70次阅读

共计 3806 个字符,预计需要花费 10 分钟才能阅读完成。

欢送关注我的公众号:前端侦探

在平时开发中,常常会碰到一些须要判断高度的场景,比方当超过肯定高度后,须要主动呈现开展折叠按钮,如下

传统的思路必定是通过 JS 去动静计算容器的高度,但这样就波及到加载机会的问题,获取早了可能元素还没渲染好,晚了又会有显著的卡顿感,或者会引起页面的闪动。

那有没有仅通过 CSS 的办法呢?

当然也是有的!要实现下面这个例子的成果,须要解决以下几个问题:

  1. 如何判断不同的高度?
  2. 如何在不同的高度下展现暗藏点击按钮?
  3. 如何点击切换?

花几分钟一起看看吧😁

一、先思考一下布局

明确来讲,CSS当初曾经有相干办法能够判断高度了,那就是 CSS 容器查问。不过这个个性太高级了,目前简直还不能实战,咱们这次介绍一种更加传统的形式。

如何判断不同的高度?换句话来说,什么样的布局在不同的高度下会有截然不同的成果

思考一下

🤔

🤔

相对定位?地位齐全固定了,不行。

flex布局?如同也只能管制程度方向上

grid布局?这个水太深,没来得及钻研(可能也行?)

等等,除了以上,还有一个当初都避而不谈的浮动布局,为啥当初都很少用了呢,起因在于 浮动布局十分软弱,细小的尺寸变动都能引起整个布局的坍塌。我记得以前用浮动布局的时候,都须要尺寸准确,略微出一点过错就导致浮动元素不晓得跑哪去了 …

既然对尺寸十分敏感,是不是和本文的临界高度有肯定分割呢?

没错,明天要用到的形式就是 浮动布局

二、浮动布局的奥秘

一步一步,来搭建咱们所须要的页面雏形。

咱们先来看一个乏味的景象,这里有一个容器,外面有 3 个子节点,别离为 ABC,其中A浮动 BC 右浮动

<div class="box">
    <div class="a">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>
.a{
    width: 100px;
    height: 100px;
    float: left;
    background-color: cadetblue;
}
.b{
    width: 300px;
    height: 100px;
    float: right;
    background-color: coral;
}
.c{
    width: 50px;
    height: 100px;
    float: right;
    background-color: darkgreen;
}

当横向空间足够时,成果是这样的

此时,A贴近右边,B贴近左边,C贴着B

如果横向空间有余,那么 C 就会换行

当初 C 看似如同跑到了 B 的下方,其实是因为 B 的高度还没有超过A

B 的高度超过 A 时,那么 C 会有如下体现

此时,C贴在 B 的左侧,A的下方

是不是很神奇?除了浮动布局,没有什么办法能够实现这样的成果了吧。😲那么,这和本文的例子有什么关系呢?

别急,其实这是一种极其状况,接着往下看

三、极其状况下的浮动体现

咱们能够设置一个极限状态,比方 A 的高度充斥容器,B的宽度充斥容器,此时 B 必定会掉下来,咱们用负的 marginB仍放弃在一行,如下

.a{
  width: 50px;
  height: 100%;
}
.b{
  width;100%;margin-left: -50px;
}

此时,B的高度不高于 A,所以C 依然是贴在 B 的下方,并且靠右。当初让 B 的高度超过A,也就是超出容器高度,就变成了这样

此时,C位于 A 的下方。也就是,仅仅因为高度超过了一个临界值,C就失去了两种截然不同的地位,如下

上面是动静演示(动静扭转 B 的高度)

试想一下,把 C 当做是“开展折叠”按钮,在这个根底上移动一下 C 的绝对地位,移到正下方,是不是就是咱们须要的成果了呢?上面的虚线框示意挪动后的地位,这样在视区范畴内,虚线框在高度有余时就是不可见的,只有在超过固定高度后才可见,示意如下(察看虚线框的地位)

残缺 demo 能够查看以下任意链接

  • float demo (codepen.io)
  • float demo (runjs.work)

整个原理就是这样了,上面来看具体实现

四、CSS 具体实现

当初回到最结尾的例子,依据后面的 demo 原型,能够革新成以下构造

<div class="content">
  <pre class="text">
        很多内容...
        很多内容...
  </pre>
  <label for="c1" class="btn"></label>
</div>

这里 .text 就相当于 B.btn 就相当于 C,至于A 齐全能够用伪元素 ::before 来代替

因为有点击切换的交互,所以须要用到 input checkbox,和label 关联起来,所以构造最终革新成这样

<div class="section">
  <input class="content-check" type="checkbox" id="c1" hidden>
  <div class="content">
    <pre class="text">
        很多内容...
        很多内容...
        </pre>
    <label for="c1" class="btn"></label>
  </div>
</div>

而后加点款式丑化一下吧,因为原理和后面是完全一致的,这里就不反复展现具体细节了

.content{
  width: 400px;
  max-height: 200px;
  overflow: hidden;
  border-radius: 4px;
  outline: 2px dashed royalblue;
}
.section{display: flex;}
pre{white-space: pre-wrap;}
.content::before{
  content: '';
  width: 100px;
  height: 100%;
  float: left;
}
.btn{
  float: right;
  width: 100px;
  text-align: center;
  position: relative;
  left: calc(50% - 50px);
  transform: translateY(-100%);
  cursor: pointer;
}
.btn::after{
  content: '';
  display: block;
  height: 34px;
  background-color: #666;
  transition: .2s background-color;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'viewBox='0 0 320 512'%3E %3Cpath d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'%3E%3C/path%3E %3C/svg%3E") center/ 24px 24px no-repeat;
}
.btn:hover::after{background-color: royalblue;}
.btn::before{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34px;
}
.text{
  box-sizing: border-box;
  width: 100%;
  padding: 10px 15px;
  float: right;
  line-height: 1.5;
  margin: 0;
  margin-left: -100px;
  font-size: 18px;
  color: #232323;
}

成果如下:

而后是点击切换成果,能够用 :checked 来管制

.content-check:checked+.content{max-height: fit-content;}
.content-check:checked+.content .btn{
  left: auto;
  right: calc(50% - 50px);
}
.content-check:checked+.content .btn::after{transform: scaleY(-1);
}

这样就能够管制不同的状态了

还能够加点遮罩,让点击处有一种淡出弱化的成果,示意别急,上面还有内容

.text{
     /* */
  -webkit-mask: linear-gradient(red 150px, transparent 200px);
}

成果如下

残缺 demo 能够拜访以下任意链接

  • CSS auto height expansion (codepen.io)
  • CSS auto height expansion (runjs.work)

五、最初总结一下

想不到浮动布局还能实现这样的性能,总的来说,这是一种老本低廉但须要点想象力的实现形式,适应性和兼容性也都不错,上面总结一下

  1. 布局有很多种,浮动布局比拟非凡
  2. 浮动布局十分软弱,细小的尺寸都能引起整个布局的坍塌
  3. 超过指定高度后,因为浮动布局引起的坍塌,正好能够辨别两种状况
  4. 通过扭转按钮自身的绝对地位,能够让案例在超出指定高度后才可见
  5. 点击切换能够用 input:checklabel相关联实现
  6. 淡出弱化成果能够增加一层蒙版mask,示意上面还有内容

最初,如果感觉还不错,对你有帮忙的话,欢送 点赞、珍藏、转发❤❤❤

欢送关注我的公众号:前端侦探

本文参加了 SegmentFault 思否写作挑战赛,欢送正在浏览的你也退出。

正文完
 0