最大高度從0過渡到自動還是無？

我有一個元素max-height of 0。我想將其轉換爲無最大高度自動或無;無論是根據現有元素的數量進行擴展。 我不想用JS和flex，但是。最大高度從0過渡到自動還是無？

這裏的的jsfiddle：https://jsfiddle.net/m9pd8bjh/19/

HTML：

<nav> 
    <input type="checkbox" id="menu-main-checkbox" hidden> 
    <label class="toggler" for="menu-main-checkbox">Menu</label> 
    <div class="hide toggleable"> 
    <ul> 
     <li>Home</li> 
     <li>Sample Page</li> 
    </ul> 
    </div> 
</nav>

CSS：

.hide { 
    visibility: hidden; 
    overflow: hidden; 
    max-height: 0; 
} 

input[type=checkbox]:checked~.toggleable { 
    visibility: visible; 
    max-height: 68px; 
} 

.toggleable { 
    transition: visibility 1.5s ease-in-out, max-height .75s ease-in-out; 
} 

.toggler { 
    cursor: pointer 
} 

nav { 
    background: #e74c3c; 
}

當我設置的最大高度到68px（高度擬合兩個列表項），它完美地工作，但是當我將最大高度設置爲500px時，例如，爲將來的列表項目留出空間時，需要花費時間從500過渡到0，從而給出在列表項再次消失之前延遲。

我不想使用縮放因爲它使它複雜化，我不得不想出解決方案來解決它下面的間距。它保持元素下方的空間併爲其打開時保留它。

來源

2016-05-25 yaharga

的可能重複[我怎樣才能過渡高度：0;到高度：auto;使用CSS？]（http://stackoverflow.com/questions/3508605/how-can-i-transition-height-0-to-height-auto-using-css） – dippas

@dippas解決方案中的可能重複說將高度設置爲一個很大的數字，這正是我正在做的。除此之外，我只需要一個解決方案。問題在於它如何轉換，而不是它是否有效。如果這個問題不夠明確，請問我有什麼令人困惑的問題，或者可以自由編輯以便於理解。 – yaharga

你有42個答案，查看並測試它，我剛剛看到一個使用'scale'的模型 – dippas

我發現的一種解決方法是使用@keyframes動畫。請記住添加供應商前綴。

這個瀏覽器支持如下：火狐5+，IE 10，Chrome瀏覽器，Safari瀏覽器4+，歌劇12+

我修改你的CSS這樣的：

.hide { 
    visibility: hidden; 
    overflow: hidden; 
    max-height: 0; 
} 

input[type=checkbox]:checked~.toggleable { 
    visibility: visible; 
    animation: height1 .75s forwards; 
} 
input[type=checkbox]:not(:checked)~.toggleable { 
    visibility: visible; 
    animation: height2 .50s forwards; 
} 

.toggleable { 
    transition: visibility 1.5s ease-in-out; 
} 

.toggler { 
    cursor: pointer 
} 

nav { 
    background: #e74c3c; 
} 
@keyframes height1 { 
    0% { max-height: 0; } 
    100% { max-height: 500px; } 
} 
@keyframes height2 { 
    0% { max-height: 500px; } 
    100% { max-height: 0; } 
}

如果使用像這樣，再次點擊時會有較小的延遲。

這裏是更新的jsfiddle：https://jsfiddle.net/m9pd8bjh/25/

來源

2016-05-25 14:17:36 Eljas

修復延遲使用過渡：'可見性0.5s立方貝塞爾（0,1,0,1）;'動畫從500px到0; –

最大高度從0過渡到自動還是無？

回答

相關問題