不能在高度：0和最大高度：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的标签来替换所有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 2

在这里你......你的CSS出了问题。

小提琴Why does Image.FromFile keep a file handle open sometimes?

CSS

$('.menu-icon').click(function(){
    $(this).toggleClass('active');
    $('#contact-form').toggleClass('open');
});

JQuery的

Function OnlyNums(sWord As String)          
    Dim sChar As String         
    Dim x As Integer            
    Dim sTemp As String         

    sTemp = ""          
    For x = 1 To Len(sWord)         
        sChar = Mid(sWord, x, 1)            
        If Asc(sChar) >= 48 And _           
          Asc(sChar) <= 57 Then         
            sTemp = sTemp & sChar           
        End If          
    Next            
    OnlyNums = Val(sTemp)           
End Function        

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