H5W3
当前位置:H5W3 > HTML5 > 正文

transition不会产生效果 height:auto

假设一个div要实现手风琴效果,展开时根据内容自适应高度即从height: (any)px; 变化到 height: auto;此时设置transition不会产生效果,   原因是 transition 无法将 ()px 变为不是具体数值的 auto

解决方法:

在两种状态下分别设置max-height,且自适应高度状态下时max-height设置为不可能超过的数值

.menu-list{
position: absolute;
z-index: 2;
left:0;
right: 0;
top:48px;
height:auto;
max-height:20rem;   //1这里
overflow: hidden;
background-color:rgba(255,255,255,1);
transition:all 0.3s cubic-bezier(0.4, 0, 1, 1);
visibility:visible
}
.menu-list.hide{
height:0px;
max-height:0;//2这里
visibility: hidden;
}
站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9535

未经允许不得转载:H5W3 » transition不会产生效果 height:auto

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址