无法在 height:0 和 max-height:500px 之间转换；

Question

我知道不可能在 0 和自动高度之间转换，并且提出的解决方案是使用 max-height 的值大于框的值，以使框增长到包含所有元素的正确高度。

但是，当我尝试在 height:0; 和 max-height:500px 之间添加过渡时，我没有得到任何过渡。

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

如何转换 height？不可能吗？

JSFiddle https://jsfiddle.net/tzgevx8e/

HTML

<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;}

Answer 1

给你...你的 CSS 出问题了。

Fiddle 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');
});

Answer 2

哎呀，这看起来很难看。老实说，您最好使用带有 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>

Answer 3

只需更改 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;
}

无法在 height:0 和 max-height:500px 之间转换；

Cannot transition between height:0 and max-height:500px;

css

css-transitions

transition

JSFiddle https://jsfiddle.net/tzgevx8e/