纯CSS实现页面中的列表收拉效果让CSS flex布局最后一行列表左对齐的N种方法(小结)CSS字体、文本、列表属性详细介绍CSS 有序或者无序列表的前面的标记 list-style-type 属性的实现css中有序无序列表项list样式设置方法CSS如何设置列表样式属性(看这篇文章就够用了)css列表滑动防止被底部遮住和适配屏幕长一点的机型处理

你可能经常见到下面这样的效果：

没错，就是页面上常用的“展开收起”交互形式，通常的做法就是控制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属性：

列表1
内容1
内容2
内容3
内容4
列表2
内容1
内容2
内容3
内容4
列表3
内容1
内容2
内容3
内容4

 .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 ease; } 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实现手风琴效果，必须监听mouseenter和mouseleave两个鼠标事件，而CSS中的:hover可代替两者的效果。所以纯CSS实现手风琴效果的关键就是:hover ，其核心代码如下：

 li { } li:hover { }

而对布局来说，这种以相同/不同宽度排列在一排的元素想要实现在一行内的展开收缩效果，比较好的方式就是 flex！

 .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页面列表收拉内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！