Auto值的CSS3 Transition解決方案

今天在準備明天的課堂案例時，遇到了Auto值的Transition Bug問題，各種搜尋之後得到解決方案，備忘如下。

問題描述

當我們需要給width、height等值設定Transition（過渡）時，如果我們的起始狀態（或結束狀態）為auto時，Transition會失效。

情境重現例如，在該案例中，二級菜單數量不定，因此ul.sub高度不定，我們需要為其賦予auto值(根據內容高度決定其高度)，這時的Transition（過渡）就不靈了。

ul.menu li .sub{    height: 0;    overflow: hidden;    transition: all 1s;}ul.menu li:hover .sub{    height:auto;}

hover狀態會起效，但是Transition失靈。解決方案這裡的解決方案是我們需要儘可能的繞過auto值，這裡我們可以通過使用max-height繞過height:auto值。當然，width可以使用max-width。

ul.menu li .sub{    max-height: 0;    overflow: hidden;    transition: all 1s;}ul.menu li:hover .sub{    max-height: 200px;}

注意事項1.我們需要確保max-height的值超過所有項中的最大值，也就是說一定要罩得住。2.我們這裡的transiton是從0到200px之間過渡，需要賦予合適的過渡期間、合理的max-height值以取得最佳的效果。That's all，Thank you.

---------------------------------------------------------------

前端開發whqet，關注web前端開發技術，分享網頁相關資源。
---------------------------------------------------------------