经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTML/CSS » CSS » 查看文章
纯CSS实现页面中的列表收拉效果_CSS教程_CSS
来源:jb51  时间:2021/3/1 17:18:53  对本文有异议

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

slide-animation

没错,就是页面上常用的“展开收起”交互形式,通常的做法就是控制display属性值在none和其他值之间切换,但是虽说功能可以实现,效果却非常生硬,所以就会有这样的一个需求 —— 希望元素在展开收起时能够有明显的高度滑动效果。

以前的实现可以用jQuery的slideUp()/slideDown()方法,但是,在移动端,因为CSS3动画支持良好,所以移动端的JavaScript框架都是没有提供动画模块的。这里自然而然就想到了CSS3技术。


笔者的第一反应就是用height+overflow:hidden;实现,既没有性能问题,也不必担心显示问题。但是转眼间就想到:很多时候我们需要展现的内容都是动态的,也就是说内容高度是不固定的(当然,你也可以用overflow-y:auto; 暂且不论)。而要达到这种效果,height就要使用“非固定值auto”!

但是auto并不是数值,而是一个关键字,所以在一个隐性规定 —— 数值和关键字之间无法计算 下,如果我们使用height0pxauto之间切换,是无法形成过渡或动画效果的。

同样的还有css中的clip-path属性:很多初学者习惯于在none和具体值之间形成动画效果,这是不可能的。

因此,想要达到文首的效果,笔者推荐max-height属性:

  1. <div class="accordion">
  2. <input id="collapse1" type="radio" name="tap-input" hidden />
  3. <input id="collapse2" type="radio" name="tap-input" hidden />
  4. <input id="collapse3" type="radio" name="tap-input" hidden />
  5. <article>
  6. <label for="collapse1">列表1</label>
  7. <p>内容1<br>内容2<br>内容3<br>内容4</p>
  8. </article>
  9. <article>
  10. <label for="collapse2">列表2</label>
  11. <p>内容1<br>内容2<br>内容3<br>内容4</p>
  12. </article>
  13. <article>
  14. <label for="collapse3">列表3</label>
  15. <p>内容1<br>内容2<br>内容3<br>内容4</p>
  16. </article>
  17. </div>
  1. .accordion {
  2. width: 300px;
  3. }
  4. .accordion article {
  5. cursor: pointer;
  6. }
  7. label {
  8. display: block;
  9. padding: 0 20px;
  10. height: 40px;
  11. background-color: #f66;
  12. cursor: pointer;
  13. line-height: 40px;
  14. font-size: 16px;
  15. color: #fff;
  16. }
  17. p {
  18. overflow: hidden;
  19. padding: 0 20px;
  20. margin: 0;
  21. border: 1px solid #f66;
  22. border-top: none;
  23. border-bottom-width: 0;
  24. max-height: 0;
  25. line-height: 30px;
  26. transition: all .5s ease;
  27. }
  28. input:nth-child(1):checked ~ article:nth-of-type(1) p,
  29. input:nth-child(2):checked ~ article:nth-of-type(2) p,
  30. input:nth-child(3):checked ~ article:nth-of-type(3) p {
  31. border-bottom-width: 1px;
  32. max-height: 130px;
  33. }

在css中,min-height/max-height出现的场景一定是自适应布局或者流体布局中。而对于展开后的max-height值,我们只需要保证设定值比内容高度大即可 —— 因为在max-height > height 时,元素高度就会以height属性的高度计算

但是建议不要把max-height值设置的太大,毕竟transition或animation的时间是“完成动画的时间”而不是“内容展示出来的时间”


收拉效果还有一种展现形式:

slideDown-animation

其特点是鼠标悬浮到组件的某个部分,该部分就会扩张开来并挤压旁边的部分,当鼠标离开时就恢复原状。若鼠标快速在其上面略过,就会产生手风琴弹琴的效果。

使用JS实现手风琴效果,必须监听mouseentermouseleave两个鼠标事件,而CSS中的:hover可代替两者的效果。所以纯CSS实现手风琴效果的关键就是:hover ,其核心代码如下:

  1. li {
  2. }
  3. li:hover {
  4. }

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

  1. <ul class="accordion">
  2. <li></li>
  3. <li></li>
  4. <li></li>
  5. <li></li>
  6. <li></li>
  7. <li></li>
  8. </ul>
  1. .accordion {
  2. display: flex;
  3. width: 600px;
  4. height: 200px;
  5. }
  6. li {
  7. flex: 1;
  8. cursor: pointer;
  9. transition: all 300ms;
  10. }
  11. li:nth-child(1) {
  12. background-color: #f66;
  13. }
  14. li:nth-child(2) {
  15. background-color: #66f;
  16. }
  17. li:nth-child(3) {
  18. background-color: #f90;
  19. }
  20. li:nth-child(4) {
  21. background-color: #09f;
  22. }
  23. li:nth-child(5) {
  24. background-color: #9c3;
  25. }
  26. li:nth-child(6) {
  27. background-color: #3c9;
  28. }
  29. li:hover {
  30. flex: 2;
  31. background-color: #ccc;
  32. }

这里有一点值得注意:像有些“特殊”情况比如 animation 的延迟,可以以 内联style 的方式在HTML中插入 CSS自定义变量 ,可以简洁代码:从一次项目重构说起CSS3自定义变量在项目中是如何使用的?

到此这篇关于纯CSS实现页面中的列表收拉效果的文章就介绍到这了,更多相关css页面列表收拉内容请搜索w3xue以前的文章或继续浏览下面的相关文章,希望大家以后多多支持w3xue!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号