内容loading加载后高度变化

在家是今天的笔记之前，昨天…啊不，前天，刷微博的时候刷到一段小诗，蛮对口的：

与影立黄昏，问釜温清粥

捻灯共熄芯，书生还书生

夜静伴春眠，共饮清风醉

朝起何相思，大梦何前尘

抬手摘星月，冷茶知我味

妄我言中泪，独路他人愁

回首无萧瑟，逍遥自在灯火阑珊处 …

---

完毕，进入笔记阶段，对就这么生硬…..

现在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加载图片上去就好了）：

https://jsfiddle.net/EvaXUAN/pg2y7t9u/

点击页面上“点击我”按钮，里面就有有高度不固定内容呈现，大伙儿就可以看到内容呈现时候不那么生硬了

如何调用？

很简单，初始化时候funTransitionHeight()一下，赋个固定值；然后每次圆圈加载完毕，内容载入后在funTransitionHeight()一下，动画就来啦。也就是说，相比你们以前的JS代码，就多了一行funTransitionHeight(element)调用而已，是不是实用又低成本！

---

最近很喜欢古风的东西不知道怎么了，再给大家推荐一首歌吧，被安利的，大概听了有两个月了（单曲循），想学会但是吧，需要的声音太细，浑厚的嗓音唱的自己都嫌弃得要死，唉，都说说话嗓音磁性的人唱歌一定好听的..呢…….

《我的一个道姑朋友》

不要觉得名字土就嫌弃它哦，原唱我没查是谁，最火翻唱是以冬，整首歌叙述的是一个故事，叫这名我也不知道为啥，最后出家了？

还有一个旁白版本，没听过旁白版本的时候我原来一直是误会剧情的（/捂脸），好啦，今天一个小短篇，大家好梦~