自動高度不工作的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; 
}