一、菊花

現(xiàn)在web技術(shù)不斷發(fā)展，視圖與數(shù)據(jù)渲染更多由前端呈現(xiàn)，后臺(tái)更多與數(shù)據(jù)打交道。于是，我們會(huì)經(jīng)常看到這樣的交互場(chǎng)景。頁(yè)面加載，看到一個(gè)框框里面有個(gè)菊花在轉(zhuǎn)，然后內(nèi)容呈現(xiàn)；或者點(diǎn)擊個(gè)按鈕，菊花在轉(zhuǎn)，然后列表動(dòng)態(tài)加載呈現(xiàn)。例如：

是不是沒有任何問題？確實(shí)，功能上OK，有菊花，用戶也愿意等。但是，大家有沒有覺得所有交互，出現(xiàn)菊花→出現(xiàn)內(nèi)容，都是“砰砰砰”很生硬的感覺，尤其當(dāng)內(nèi)容是動(dòng)態(tài)，高度不確定的時(shí)候。我們使用一些比較好的手機(jī)APP(如微信)的時(shí)候一定不會(huì)有這樣的感覺，整個(gè)交互流程都是很流暢的，就像山澗的泉水，涓涓細(xì)流到山腳，而不是巨人在峽谷走路的感覺。

所以，如果菊花的呈現(xiàn)到內(nèi)容的展示能夠通過自然的動(dòng)畫過渡呈現(xiàn)，勢(shì)必會(huì)增強(qiáng)用戶體驗(yàn)。

而動(dòng)態(tài)內(nèi)容呈現(xiàn)主要變化的關(guān)鍵因素就是——高度，而過渡效果最佳利器是CSS3 transition, 于是，腦中不禁疑問，是不是可以借助CSS3 transition實(shí)現(xiàn)動(dòng)態(tài)內(nèi)容的高度動(dòng)畫呈現(xiàn)，漸進(jìn)增強(qiáng)用戶體驗(yàn)。

其實(shí)，早在12年的時(shí)候，我就開始了這方面的嘗試，若有興趣可以查看此文：“更多|收起交互中漸進(jìn)使用transition動(dòng)畫”。我自己也瞅了瞅，發(fā)現(xiàn)當(dāng)年的我講廢話的本領(lǐng)甩了現(xiàn)在的我兩條長(zhǎng)安街。大家直接從Part5 看就好了。 其中，受限于當(dāng)年略顯稚嫩的技術(shù)，里面獲得容器高度的方法，有些傻，大家就假裝沒看到。
二、CSS3 transition的難點(diǎn)

如果直接一行CSS代碼就可以讓動(dòng)態(tài)呈現(xiàn)動(dòng)畫化，那就不需要本文了，早就各個(gè)站點(diǎn)都是這類優(yōu)質(zhì)體驗(yàn)的交互了。究其根本就是CSS3 transition的一個(gè)局限性，對(duì)"auto"*冷淡！嘛意思？

大家很好理解，所謂“過渡”，就是從一個(gè)地方到另外一個(gè)地方，比方說，從0到100. 但是，你來個(gè)從0到auto, 傻眼了吧。大學(xué)時(shí)看過一部美國(guó)科幻片《心靈傳輸者》，其中男主也不是想瞬間位移就瞬間位移的，也是需要知道目的地和路徑的。

然而，當(dāng)我們?cè)谝粋€(gè)div呈現(xiàn)動(dòng)態(tài)內(nèi)容的時(shí)候，由于我們并不知道里面的內(nèi)容(都說了是動(dòng)態(tài)的嘛)，所以，我們的height其實(shí)都是auto，于是，就算transition: height .35s走起，也不會(huì)有動(dòng)畫效果的，我們需要的是固定值。

于是難點(diǎn)和關(guān)鍵點(diǎn)來了，如何賦予固定高度值？
三、固定高度值與transition觸發(fā)

說白了很簡(jiǎn)單，當(dāng)前高度固定值，獲得動(dòng)態(tài)內(nèi)容載入后的高度固定值，再style設(shè)置，over~

代碼細(xì)節(jié)我就不講了，其實(shí)沒什么人關(guān)心的，“我需要的是代碼，代碼！”估計(jì)很多人心里是這么咆哮的。