下拉列表的过渡效果

一些场合我们可能需要一些类似于如下下拉过渡的效果

1397725-20180727215029803-1631922931.gif

实现方法这里总结两种

html结构

1397725-20180727215731558-463978945.png

必须是这种结构,思路就是通过控制第二个盒子(在这儿是ul)的高度,实现上拉,下拉的效果,这儿只需要将<ul>设置为overflow: hidden; 再结合css3过渡就可以实现

方法1:当ul有固定高度,这时可以为ul添加class,然后再结合transition实现过渡

1397725-20180727215808892-30641751.png
这是关键的css代码
1397725-20180727215832903-1416731342.png
这是通过classLst.toggle实现切换类的目的,这样就达到了我们的目的(注意:ul必须为固定高度,将ul的高度设置为height: 100%是无法实现过渡的)

方法2:当ul没有固定高度,这时就必须通过js进行实现;

1397725-20180727220654196-170427373.png
这儿是css代码
1397725-20180727220726941-478966884.png
这儿是js代码,框起来的红色部分,是为了让ul的高度可计算,如果没有这一句的话,那么首次过渡,ul会瞬间变成0,而无法实现过渡。

转载于:https://www.cnblogs.com/usebtf/p/9379911.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值