vue 展开收缩动态ul 初始高度90，不使用transition-grounp使用js控制过渡效果

心累，慌的一批搞了好久，记录一下

 参考链接

1.https://www.jianshu.com/p/b8425c115a67

2.https://www.cnblogs.com/susanws/p/7421857.html

3.https://blog.csdn.net/HUSHILIN001/article/details/94400705

4.https://www.cnblogs.com/jwyblogs/p/13816003.html

5.https://www.jianshu.com/p/6cd79c029167?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

1.首先

给ul ref名 ref="ul"，样式给ul设置overflow:hidden;transition:all .3s；

重点代码--->

2.mounted里面

 要实现过渡transition效果就要给一个最大值和最小值，offsetheight是偏移量偏移高度值，就是这个ul的最大高度，所以不要对ul的li做数据上的处理,比如splice等待，这个时候是获取到ul的最大高度，mounted里面给这个ul预留一个初始值，比如我需要这个ul初始高度为90px.刚进入这个页面展示高度为90px的内容

3.控制显示更多按钮

 4.data数据里面

 这个ulheight值无所谓多少，因为在mounted里面已经做过处理，这里只是定义一个变量

完了，之前做显示更多的操作百度到的一个方法就是在computed里面监听，因为我要初始显示三个用户头像，但是这样改变了数组内容，样式一直用不上去，transition的话，用的不怎么熟练，记录一下吧反正，，，，，

showList(){
if(this.rotate == false){
var showList = [];
if(this.userFamilyMember.length>3){
for(var i = 0;i<3;i++){
showList.push(this.userFamilyMember[i]);
}
}else{
showList = this.userFamilyMember;
}
return showList;
}else{
return this.userFamilyMember;
}
},

淦，哭了，这个应该也可以的