不能在height:0和max-height:500px之间转换

我知道在0和auto高度之间转换是不可能的，提出的解决方案是使用max-height的值大于盒子的值，以便使盒子生长到正确的高度，以包含它的所有元素。

然而，当我试图在height:0;和max-height:500px之间添加过渡时，我没有得到过渡。

我又尝试了简单的height:0;和height:500px，应该是可转换的，但它似乎不是。

如何转换height ?这是不可能的吗?

<标题> JSFiddle https://jsfiddle.net/tzgevx8e/

<div class="menu-icon">click me</div>
<div id="contact-form" class="closed">
    <h1>test</h1>
    <p>lorem ipsum dolor sit amet</p>
</div>

jQuery

$(document).ready(function(){ $('.menu-icon').click(function(){ $('.menu-icon').addClass('active'); var form_status = $('#contact-form').attr('class'); if (form_status == 'closed'){ openFooter(); }else{ closeFooter(); } }); function openFooter(){ $('#contact-form').removeClass('closed'); } function closeFooter(){ $('#contact-form').addClass('closed'); $('.menu-icon').removeClass('active'); } });
CSS

#contact-form.closed{display:none;height: 0px;overflow: hidden;transition:all 0.5s ease-in;} #contact-form{display:block;height:200px;overflow:hidden;transition:all 0.5s ease-in;background-color:#2e263d;color:#fff;padding:20px 0 40px 0;}

哎呀，看起来很丑。老实说，您最好使用带有一点CSS的复选框和标签来取代所有jQuery的废话。虽然@VIDesignZ已经解决了你的问题，我觉得这是一个更好的解决方案:

input { display: none; } input:checked + label + div { height: 200px; padding: 20px 0 40px 0; } input:checked + label:after { content: " To Hide"; } input+ label:after { content: " To Show"; } div { display: block; height: 0; padding: 0; overflow: hidden; transition: all 0.5s ease-in; background-color: #2e263d; color: #fff; }
<input type='checkbox' id=cb> <label for=cb>Click Here</label> <div> Hello. This is some stuff. </div>

给你…你的CSS出问题了

小提琴https://jsfiddle.net/tzgevx8e/3/
CSS
#contact-form { overflow:hidden; height:0px; transition:all 0.5s ease-in; } #contact-form.open { height:200px; background-color:#2e263d; color:#fff; padding:20px 0 40px 0; }
JQuery
$('.menu-icon').click(function(){ $(this).toggleClass('active'); $('#contact-form').toggleClass('open'); });

就像我在下面提到的那样改变CSS，不需要改变其他任何东西。

#contact-form.closed{ max-height: 0; overflow: hidden; transition: all 0.5s ease-in; padding: 0 } #contact-form{ max-height: 500px; overflow: hidden; transition: all 0.5s ease-in; background-color: #2e263d; color: #fff; padding: 20px 0 40px 0; }

相关内容

最新更新

热门标签：