帶動畫的CSS下拉菜單（沒有js）

嘗試使用CSS動畫創建一個動畫下拉菜單，沒有任何JS。以爲我一直吠叫右樹卻看不到我要去哪裏錯了，這個簡化的菜單項...帶動畫的CSS下拉菜單（沒有js）

<div class="menu">Menu Item 
    <ul> 
     <li>Dropdown 1</li> 
     <li>Dropdown 2</li> 
     <li>Dropdown 3</li> 
     <li>Dropdown 4</li> 
     <li>Dropdown 5</li> 
    </ul> 
</div>

下面CSS;

.menu ul { 
    height: 0px; 
    overflow: hidden; 
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
    transition: all 0.5s ease-in-out; 
} 

.menu:hover ul { 
    height: auto; 
}

認爲應該成功地導致向下滾動的div，但它只是不斷出現。有什麼想法嗎？乾杯

來源

2013-05-07 Dominic England

可以看到一個例子... http://jsfiddle.net/Sm9pU/ – 2013-05-07 14:38:05

可能重複[CSS過渡高度：0;到高度：自動;]（http://stackoverflow.com/questions/3508605/css-transition-height-0-to-height-auto） – Blazemonger 2013-05-07 14:39:28

參考請參見本主題：How can I transition height: 0; to height: auto; using CSS?

簡單地說，你無法對動畫height: auto;。它不受支持。如果您有一個預先確定的固定高度，您可以通過對該特定值進行動畫製作來實現。例如0px到100px。自動但不支持。

上述鏈接中的第一個答案鏈接到另一篇文章，其中提供了一種解決方法。您可以在您的網站上探索實施。

Can you use CSS3 to transition from height:0 to the variable height of content?

來源

2013-05-07 14:38:39 Michael

啊沒有意識到，要擺脫js減少你在舊電腦和移動設備上遇到的那種震顫般的效果。猜測我可能會堅持轉換到預先計算好的高度，這是公平的，不應該很難計算，因爲每個鋰都有一個固定的高度。爲此歡呼！ – 2013-05-07 14:44:27

根本不難，當然也是一件足夠的事情。如果您要動態加載導航，那麼計算該高度會變得毛茸茸的，一旦修改了導航，這會導致計算混亂。理想情況下，您不必手動更改該值。但是，如果你的導航不會有太大變化，我認爲大多數人都可以接受這個問題。 – Michael 2013-05-07 14:47:46

不能使用CSS過渡與height:auto，只能用特定的值。

.menu:hover ul { 
    height: 100px; 
}

http://jsfiddle.net/mblase75/cWZMu/

來源

2013-05-07 14:39:02 Blazemonger

爲此我歡呼，正如我上面所說的，可能只是遵循這個建議 – 2013-05-07 14:44:51

的下拉動畫可以用純CSS來實現：

ul { 
    overflow: hidden; 
    transition: all .3s ease; 
} 

ul.folded { 
    max-height: 0; 
} 

ul.unfolded { 
    max-height: 300px; //value of max-height should always bigger than actual sum of all li's height 
}

來源

2016-09-05 03:32:35 artecher

帶動畫的CSS下拉菜單（沒有js）

回答

相關問題