loading什么意思

转张鑫旭loading事件

内容loading加载后⾼度变化CSS3transition体验优化

⼀、⼩美，你好

此“⼩美”⾮东四街的⼩美，⽽是“⼩⽽美研究”的简称，实⽤⼩技巧，分分钟Get,积累⾜够多，量变到质变。

本⽂应该就属于这个范畴，提炼的成果就是⼗来⾏代码。

现在web技术不断发展，视图与数据渲染更多由前端呈现，后台更多与数据打交道。于是，我们会经常看到这样的交互场景。页⾯加载，看

到⼀个框框⾥⾯有个菊花在转，然后内容呈现；或者点击个按钮，菊花在转，然后列表动态加载呈现。例如：

是不是没有任何问题？确实，功能上OK，有菊花，⽤户也愿意等。但是，⼤家有没有觉得所有交互，出现菊花→出现内容，都是“砰砰砰”很

⽣硬的感觉，尤其当内容是动态，⾼度不确定的时候。我们使⽤⼀些⽐较好的⼿机APP(如微信)的时候⼀定不会有这样的感觉，整个交互流

程都是很流畅的，就像⼭涧的泉⽔，涓涓细流到⼭脚，⽽不是巨⼈在峡⾕⾛路的感觉。

所以，如果菊花的呈现到内容的展⽰能够通过⾃然的动画过渡呈现，势必会增强⽤户体验。

⽽动态内容呈现主要变化的关键因素就是——⾼度，⽽过渡效果最佳利器是CSS3transition,于是，脑中不禁疑问，是不是可以借助CSS3

transition实现动态内容的⾼度动画呈现，渐进增强⽤户体验。

其实，早在12年的时候，我就开始了这⽅⾯的尝试，若有兴趣可以查看此⽂：“”。我⾃⼰也瞅了瞅，发现当年的我讲废话的本领甩了现在的

我两条长安街。⼤家直接从Part5看就好了。其中，受限于当年略显稚嫩的技术，⾥⾯获得容器⾼度的⽅法，有些傻，⼤家就假装没看

到。

⼆、CSS3transition的难点

如果直接⼀⾏CSS代码就可以让动态呈现动画化，那就不需要本⽂了，早就各个站点都是这类优质体验的交互了。究其根本就是CSS3

transition的⼀个局限性，对"auto"*冷淡！嘛意思？

⼤家很好理解，所谓“过渡”，就是从⼀个地⽅到另外⼀个地⽅，⽐⽅说，从0到100.但是，你来个从0到auto,傻眼了吧。⼤学时看过⼀部美国

科幻⽚《⼼灵传输者》，其中男主也不是想瞬间位移就瞬间位移的，也是需要知道⽬的地和路径的。

然⽽，当我们在⼀个div呈现动态内容的时候，由于我们并不知道⾥⾯的内容(都说了是动态的嘛)，所以，我们的height其实都是auto，于是，

就算transition:height.35s⾛起，也不会有动画效果的，我们需要的是固定值。

于是难点和关键点来了，如何赋予固定⾼度值？

三、固定⾼度值与transition触发

说⽩了很简单，当前⾼度固定值，获得动态内容载⼊后的⾼度固定值，再style设置，over~

代码细节我就不讲了，其实没什么⼈关⼼的，“我需要的是代码，代码！”估计很多⼈⼼⾥是这么咆哮的。

//⾼度⽆缝动画⽅法

varfunTransitionHeight=function(element,time){//time,数值，可缺省

if(putedStyle=="undefined")return;

varheight=putedStyle(element).height;

tion="none";//本⾏2015-05-20新增，macSafari下，貌似auto也会触发transition,故要none下~

="auto";

vartargetHeight=putedStyle(element).height;

=height;

Width=Width;

if(time)tion="height"+time+"ms";

=targetHeight;

};

⼗⾏出头点代码。

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

element{transition:height250ms;overflow:hidden;}

funTransitionHeight(element)

funTransitionHeight名字如果你不喜欢，可以⾃⼰改掉。IE9+有效，IE10+有动画，IE6~IE8⽼样⼦，所谓渐进增强。

百闻不如⼀见，您可以狠狠地点击这⾥：

点击页⾯上“点击我”按钮，⾥⾯就有有⾼度不固定内容呈现，⼤伙⼉就可以看到内容呈现时候不是砰砰砰了，⽽是歘歘歘~

如何调⽤？很简单，初始化时候funTransitionHeight()⼀下，赋个固定值；然后每次菊花完毕，内容载⼊后在funTransitionHeight()⼀下，动画就来

啦。也就是说，相⽐你们以前的JS代码，就多了⼀⾏funTransitionHeight(element)调⽤⽽已，是不是实⽤⼜低成本！

四、结束语

貌似最近折腾了很多，菊花恒久远，⼀颗永流传！

感谢阅读，欢迎交流菊花⼼得！