注：此方法出自前端技術(shù)專家@張鑫旭所著《CSS世界》

“展開收起”效果是網(wǎng)頁中比較常見的一種交互方式，通常的做法是控制display屬性值在none和其它值之間切換，雖說功能可以實(shí)現(xiàn)，但是效果略顯生硬，所以會有這樣的需求——希望元素展開收起能具有平滑的效果。傳統(tǒng)實(shí)現(xiàn)可以使用JQuery的slideUp()/slideDown()方法，但是，在移動端，由于CSS3動畫支持良好，所以移動端的JavaScript框架都是沒有動畫模塊的。此時(shí)，使用CSS實(shí)現(xiàn)動畫成為了最佳的技術(shù)選型：

我們的第一反應(yīng)可能是考慮使用height+overflow:hidden+transition的方案，如下：

.element {
    height: 0;
    overflow: hidden;
    transition: height .25s;
}

.element:hover {
    height: auto;     /* 沒有transition效果，僅僅生硬地隱藏/展開 */ 
}

但是結(jié)果可能并不會是我們所預(yù)期的那樣；原因是我們將要展開的元素內(nèi)容是動態(tài)的，即高度值不確定，因此，height使用的值是默認(rèn)的auto，從0px到auto是無法計(jì)算的，因此無法形成過渡或動畫效果。

為了解決這個(gè)問題，可以使用max-height代替，如：

.element {
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s;
}

.element:hover {
    max-height: 666px;     /* 一個(gè)足夠大的值*/ 
}

其中展開后的max-height值，只需要設(shè)定為保證比展開內(nèi)容高度大的值即可，在max-height值比height值大的情況下，元素仍會默認(rèn)采用自身的高度值，即auto；如此一來，一個(gè)高度不定的元素展開收起動畫效果就實(shí)現(xiàn)了。

然而在使用本方法時(shí)，需要注意一點(diǎn)：雖然從適用范圍上說，max-height值越大可供使用的場景越多，但是如果max-height值太大，在元素收起的時(shí)候?qū)a(chǎn)生延遲的效果，這是因?yàn)樵谑掌饡r(shí)，max-height從設(shè)定的特別大的值，到元素自身高度值的變化過程將占用較多時(shí)間，此時(shí)畫面表現(xiàn)則會產(chǎn)生延遲的效果。

因此，建議將max-height值設(shè)置為足夠安全的最小值，這樣在收起時(shí)即使有略微延遲，也會因?yàn)闀r(shí)間很短，難以被用戶感知，將不會影響體驗(yàn)。