自动高度不工作的CSS切换过渡动画

Question

我有点难以解决这个CSS自动高度的过渡问题，并想知道其他人是否有任何线索和建议。提前致谢。

1. 这里是我试图让工作自动高度的一个例子，但过渡不工作，但自动高度理想与自适应网站：

http://jsfiddle.net/z5x6abog/

的Javascript ：

$(document).ready(function(){ 
    $(".button").click(function(){ 
    $(".test").toggleClass("collapse"); 
    }); 
}); 

CSS：

.test.collapse ul { 
height: auto; 

这里是与特定像素的特定高度的例子，但请注意的部位是敏感和高度将总是由于浮动列表改变这种不理想：

http://jsfiddle.net/obn34ufx/

CSS：

.test.collapse ul { 
height: 500px; 

会有人知道的方法，使例＃1的工作？

谢谢！

Answer 1

感谢大家的反馈。下面是我用哪去了最终的解决方案允许响应和平滑切换：

http://jsfiddle.net/jhqvL4q0/4/

$(document).ready(function(){ 
    $(".button").click(function(){ 
     $(".collapse-list").toggleClass("collapse"); 
    }); 
}); 

Answer 2

尝试类似下面。走LI和高度，这样就不会有任何东西被切断。根据需要调整。

$(document).ready(function(){ 
 
    $(".button").click(function(){ 
 
    $(".test").toggleClass("expand", 5000); 
 
    }); 
 
});

.test ul { 
 
width:50%; 
 
overflow:hidden; 
 
height:auto; 
 
-webkit-transition-duration: 0.8s; 
 
-moz-transition-duration: 0.8s; 
 
-o-transition-duration: 0.8s; 
 
transition-duration: 0.8s; 
 
} 
 

 
.test li { 
 
float:left; 
 
width:100px; 
 
} 
 

 
.test li:not(:nth-of-type(-n+10)) { 
 
width:100px; 
 
    display: none; 
 
} 
 

 
.test.collapse ul { 
 
width:50%; 
 
height: 500px; 
 
-webkit-transition-duration: 0.8s; 
 
-moz-transition-duration: 0.8s; 
 
-o-transition-duration: 0.8s; 
 
transition-duration: 0.8s; 
 
} 
 

 

 
.test.expand ul li { 
 
    display: block; 
 
    
 
    
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="test"> 
 
    <ul> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
     <li>Malesuada</li> 
 
     <li>Pellentesque</li> 
 
     <li>ulum tortor</li> 
 
     <li>amet quam</li> 
 
    </ul> 
 
\t <a href="#" class="button">Toggle</a> 
 
</div>

Answer 3

这是不可能的使用具有高度的转换：汽车。 最大高度技巧是一个相当不错的解决方案，但有一些不便之处，尤其是如果最大高度比真实高度高得多的奇怪延迟。

下面是我使用的技巧：http://jsfiddle.net/g56jwux4/2/ 基本上它是两个相反方向翻译的鳞片DIV。看一下jsfiddle的代码，因为我的英文不够好，不足以清楚地解释它。

HTML部分：

<body> 
    <p>Technicaly this dropdown menu looks like a simple height transition.</p> 
    <p>But this pure css code also works this a variable number of choices in menu, working around the "height:auto" not taken into account by css transitions.</p> 
    <input type="checkbox" id="menuOpen"></input> 
    <label id="bouton" for="menuOpen"><span>Click on me !</span> 
     <div id="menu"> 
      <div id="masque"> 
       <div class="choix" id="choix1">Choix 1</div> 
       <div class="choix" id="choix2">Choix 2</div> 
       <div class="choix" id="choix3">Choix 3 tr&egrave;s tr&egrave;s long pour voir la taille finale du menu</div> 
       <div class="choix" id="choix4">Choix 4</div> 
       <div class="choix" id="choix5">Choix 5</div> 
       <div class="choix" id="choix6">Choix 6</div> 
      </div> 
     </div> 
    </label> 
</body> 

CSS部分：

body { 
    font-family: sans-serif; 
} 
#menuOpen { 
    display: none; 
} 
#bouton { 
    position: absolute; 
    left: 100px; 
    top: 100px; 
    width: 200px; 
    height: 30px; 
    background-color: lightgray; 
    cursor: pointer; 
} 
#bouton > span { 
    color: black; 
    padding: 6px; 
    line-height: 30px; 
} 
#menu { 
    position: absolute; 
    top: 100%; 
    overflow: hidden; 
    min-width: 100%; 
    transition: transform 0.3s linear 0s, visibility 0.3s linear 0s; 
    transform: translateY(-100%); 
    visibility: hidden; 
    color: white; 
} 
#menuOpen:checked + #bouton > #menu { 
    transform: translateY(0%); 
    visibility: visible; 
    transition: transform 0.3s linear 0s, visibility 0s linear 0s; 
} 
#menuOpen:checked + #bouton > #menu > #masque { 
    transform: translateY(0%); 
} 
#masque { 
    position: relative; 
    background-color: gray; 
    transform: translateY(100%); 
    transition: transform 0.3s linear 0s; 
} 
.choix { 
    white-space: nowrap; 
    padding: 3px 6px; 
} 
.choix:hover { 
    background-color: darkgray; 
}