在家是今天的筆記之前，昨天…啊不，前天，刷微博的時候刷到一段小詩，蠻對口的：

與影立黃昏，問釜溫清粥

捻燈共熄芯，書生還書生

夜靜伴春眠，共飲清風醉

朝起何相思，大夢何前塵

擡手摘星月，冷茶知我味

妄我言中淚，獨路他人愁

回首無蕭瑟，逍遙自在燈火闌珊處 …

完畢，進入筆記階段，對就這麼生硬…..

現在web技術不斷髮展，檢視與資料渲染更多由前端呈現，後臺更多與資料打交道。

於是，我們會經常看到這樣的互動場景。

頁面載入，看到一個框框裡面有個小圓圈之類的在轉，然後內容呈現；或者點選個按鈕，圓圈在轉，然後列表動態載入呈現。例如：

嘛 ，就介個….

是不是沒有任何問題？

確實，功能上OK，有載入狀態，使用者也願意等。

但是，大家有沒有覺得所有互動，出現載入→出現內容，都是“砰砰砰”很生硬的感覺，尤其當內容是動態，高度不確定的時候。我們使用一些比較好的手機APP(如微信)的時候一定不會有這樣的感覺，整個互動流程都是很流暢的，就像山澗的泉水，涓涓細流到山腳，而不是巨人在峽谷走路的感覺。

所以，如果圓圈的呈現到內容的展示能夠通過自然的動畫過渡呈現，勢必會增強使用者體驗。

而動態內容呈現主要變化的關鍵因素就是——高度，而過渡效果最佳利器是CSS3 transition, 於是，腦中不禁疑問，是不是可以藉助CSS3 transition實現動態內容的高度動畫呈現，漸進增強使用者體驗。

CSS3 transition的難點

如果直接一行CSS程式碼就可以讓動態呈現動畫化，那就不需要本文了，早就各個站點都是這類優質體驗的互動了。究其根本就是CSS3 transition的一個侷限性，對”auto”*冷淡……..

嘛意思？

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

然而，當我們在一個div呈現動態內容的時候，由於我們並不知道里面的內容(都說了是動態的嘛)，所以，我們的height其實都是auto，於是，就算transition: height .35s走起，也不會有動畫效果的，我們需要的是固定值。

於是難點和關鍵點來了，如何賦予固定高度值？

固定高度值與transition觸發

說白了很簡單，當前高度固定值，獲得動態內容載入後的高度固定值，再style設定，over~

程式碼細節我就不講了，其實沒什麼人關心的，“我需要的是程式碼，程式碼！”估計很多人心裡是這麼咆哮的。

// 高度無縫動畫方法

var funTransitionHeight = function(element, time)
 { // time, 數值，可預設
    if (typeof window.getComputedStyle == "undefined") return;

    var height = window.getComputedStyle(element).height;

    element.style.transition = "none";  
   // 本行2015-05-20新增，mac Safari下，貌似auto也會觸發transition, 故要none下~

    element.style.height = "auto";
    var targetHeight = window.getComputedStyle(element).height;
    element.style.height = height;
    element.offsetWidth = element.offsetWidth;
    element.offsetWidth;
    if (time) element.style.transition = "height "+ time +"ms";
    element.style.height = targetHeight;
};

十行出頭點程式碼。

element就是容器元素；如果transition你是寫在CSS中的，time引數可以不要，例如：

element { transition: height 250ms; overflow: hidden; }

funTransitionHeight(element)

funTransitionHeight名字如果你不喜歡，可以自己改掉。IE9+有效，IE10+有動畫，IE6~IE8老樣子，所謂優雅降級。

小例旬（因為線上的GIF載入圖，所以點選空白的時候就是JFG小圓圈載入，用的時候換個GIF載入圖片上去就好了）：

點選頁面上“點選我”按鈕，裡面就有有高度不固定內容呈現，大夥兒就可以看到內容呈現時候不那麼生硬了

如何呼叫？

很簡單，初始化時候funTransitionHeight()一下，賦個固定值；然後每次圓圈載入完畢，內容載入後在funTransitionHeight()一下，動畫就來啦。也就是說，相比你們以前的JS程式碼，就多了一行funTransitionHeight(element)呼叫而已，是不是實用又低成本！

最近很喜歡古風的東西不知道怎麼了，再給大家推薦一首歌吧，被安利的，大概聽了有兩個月了（單曲循），想學會但是吧，需要的聲音太細，渾厚的嗓音唱的自己都嫌棄得要死，唉，都說說話嗓音磁性的人唱歌一定好聽的..呢…….

《我的一個道姑朋友》

不要覺得名字土就嫌棄它哦，原唱我沒查是誰，最火翻唱是以冬，整首歌敘述的是一個故事，叫這名我也不知道為啥，最後出家了？

還有一個旁白版本，沒聽過旁白版本的時候我原來一直是誤會劇情的（/捂臉），好啦，今天一個小短篇，大家好夢~