今天在学习 WeUI的时候，觉得有些小知识可以总结下来，好记性不如烂笔头嘛~
实现列表下来的方式很多，这里主要说下用 transition 实现过渡动画的效果。
原理：“W3C标准中对CSS3的transition是这样描述的：css的transition允许css的属性值在一定的时间区域内平滑的过渡。这种效果可以在鼠标单击 获得焦点 被点击或者对元素的任何改变中触发，并圆滑的以动画效果改变CSS的属性值。”
小程序上页面效果图
wxml代码图
css样式图一
值得注意的是：css 支持动画的属性中 height 属性的值要是 length、百分比或者 calc()计算的值。所以当 height: auto 时不支持css3动画，故用transition作用于height也无效。此时如果可以确定该元素的最大高度 可作用于 max-height （适当设置，比height自增长稍大即可，不宜设置太大，影响效果）上，也能达到同样效果，如下code：
css样式图二
如果 height 和 max-height 都不确定的情况下，可以用 transform: translateY()方法在Y轴上平移过渡来实现动画效果，如下code：
css样式图三
网友评论