你可能经常见到下面这样的效果:
没错,就是页面上常用的“展开收起”交互形式,通常的做法就是控制display属性值在none和其他值之间切换,但是虽说功能可以实现,效果却非常生硬,所以就会有这样的一个需求 —— 希望元素在展开收起时能够有明显的高度滑动效果。
以前的实现可以用jquery的slideup()描写家的作文/slidedown()
方法,但是,在移动端,因为css3动画支持良好,所以移动端的javascript框架都是没有提供动画模块的。这里自然而然就想到了css3技术。
笔者的第一反应就是用height+overflow:hidden;
实现,既没有性能问题,也不必担心显示问题。但是转眼间就想到:很多时候我们需要展现的内容都是动态的,也就是说内容高度是不固定的(当然,你也可以用overflow-y:auto;
暂且不论)。而要达到这种效果,height就要使用“非固定值auto”!
但是auto
并不是数值,而是一个关键字,所以在一个隐性规定 —— 数值和关键字之间无法计算 下,如果我们使用height
在0px
和auto
之间切换,是无法形成过渡或动画效果的。
同样的还有css中的
clip-path
属性:很多初学者习惯于在none和具体值之间形成动画效果,这是不可能的。
因此,想要达到文首的效果,笔者推荐max-height属性aabc式:
<div class="accordion"><input id="collap1" type="radio" name="tap-input" hidden /><input id="collap2" type="radio" name="tap-input" hidden /><input id="collap3" type="radio" name="tap-input" hidden /><article><label for="collap1">列表1</label><p>内容1<br>内容2<br>内容3<br>内容4</p></article><article><label for="collap2">列表2</label><p>内容1<br>内容2<br>内容3<br>内容4</p></article><article><label for="collap3">列表3</label><p>内容1<br>内容2<br>内容3<br>内容4</p></article></div>
.accordion {width: 300px;}.accordion article {cursor: pointer;}label {display: block;padding: 0 20px;height: 40px;background-color: #f66;cursor: pointer;line-height: 40px;font-size: 16px;color: #fff;}p {overflow美国最大的航母: hidden;padding: 0 20px;margin: 0;border: 1px solid #f66;border-top: none;border-bottom-width: 0;max-height: 0;line-height: 30px;transition: all .5s ea;}input:nth-child(1):checked ~ article:nth-of-type(1) p,input:nth-child(2):checked ~ article:nth-of-type(2) p,input:nth-child(3):checked ~ article:nth-of-type(3) p {border-bottom-width: 1px;max-height: 130px;}
在css中,min-height/max-height
出现的场景一定是自适应布局或者流体布局中。而对于展开后的max-height
值,我们只需要保证设定值比内容高度大即可 —— 因为在max-height > height 时,元素高度就会以height属性的高度计算。
但是建议不要把max-height值设置的太大,毕竟transition或animation的时间是“完成动画的时间”而不是“内容展示出来的时间”
英语四级过线分数
收拉效果还有一种展现形式:
其特点是鼠标悬浮到组件的某个部分,该部分就会扩张开来并挤压旁边的部分,当鼠标离开时就恢复原状。若鼠标快速在其上面略过,就会产生手风琴弹琴的效果。
使用js实现手风琴效果,必须监听mouenter
和mouleave
两个鼠标事件,而css中的:hover
可代替两者的效果。所以纯css实现手风琴效果的关键就是:hover
,其核心代码如下:
li {}li:hover {}
而对布局来说,这种以相同/不同宽度排列在一排的元素想要实现在一行内的展开收缩效果,比较好的方式就是 flex!
<ul class="accordion"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li></ul>
.accordion {display: flex;width: 600px;height: 200px;}li {flex: 1;cursor: pointer;transition: all 300ms;}li:nth-child(1) {background-color: #f66;}li:nth-child(2) {background-color: #66f;}li:nth-child(3) {background-color: #f90;}li:nth-child(4) {background-color: #09f;}li:nth-child(5) {background-color:毒大米事件 #9c3;}li:nth-child(6) {background-color: #3c9;}li:hover {flex: 2;background-color: #ccc;}
这里有一点值得注意:像有些“特殊”情况比如 animation 的延迟,可以以 内联style 的方式在html中插入 css自定义变量 ,可以简洁代码:从一次项目重构说起css3自定义变量在项目中是如何使用的?
到此这篇关于纯css实现页面中的列表收拉效果的文章就介绍到这了,更多相关css页面列表收拉内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章,希望大家以后多多支持www.887551.com!
本文发布于:2023-04-07 17:55:33,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/75a8cadf1c1bf08f2fb0476971e6119b.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:纯CSS实现页面中的列表收拉效果.doc
本文 PDF 下载地址:纯CSS实现页面中的列表收拉效果.pdf
留言与评论(共有 0 条评论) |