今天完成的事情：

今天开始用nz-zorro重构任务代码，主要是学习的栅格的用法，和常用组件，为项目做准备。

登录页重构完。

后台管理的布局和侧边栏重构完，
明天计划的事情：

重构请求列表页，和图片上传页。
遇到的问题：

暂无。
收获：

二、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老样子，所谓渐进增强。

百闻不如一见，您可以狠狠地点击这里：不定高度动态元素height CSS3 transition过渡demo

点击页面上“点击我”按钮，里面就有有高度不固定内容呈现，大伙儿就可以看到内容呈现时候不是砰砰砰了，而是歘歘歘~

https://www.zhangxinxu.com/study/201501/css3-any-height-transition.html