vue.js实现点击展开收起动画效果

最近公司项目加了个页面，其中要求是这样的，点击对应列表，展开和收起，其实就是显示和隐藏内容部分；说来惭愧，我花了半天时间才搞出来（自黑一下~),接下来分享给大家，先上效果图：

某视频剪辑软件页面：

template div class=' deal record-wrap ' div class=' title-content ' v-for='(item，index)items ' div class=' title ' @ click=' showHide(index)' h 32018年0 { {索引6}}月/h3 div class='number'800笔I/I/div/div class=' content ' ul Li v-for=' I ' in item。所有数字' { index 6 } }/Li/ul/div/div/模板导出默认{ data(){ return { items : ' QQ '、allNumber:1}、{v:'aaa '、allNumber:2}、{ v 3: ' qqqq '、allNumber:3 }、]、}、mounted(){ for(var I=0；i3；i ){ //这里取值自后台返回的长度，设置页面渲染完成后是否展开，此处不展开文件。getelementsbyclassname(' contant ')[I]。风格。高度=' 0px} }，components:{ }，methods : { showHide(index){//点击展开收起让contant=document。getelementsbyclassname(' contant ')[index]；//这里我们通过参数指数来让浏览器判断你点击的是哪一个列表让高度=contant。getboundingclientrect().身高；//获取页面元素的当前高度文件。getelementsbytagname(' I ')[索引]。风格。转换=！身高？rotateX(0度)' : ' rotateX(180度)'；if(！高度){ contant。风格。高度=高度“px”；让f=文档。尸体。偏移光线；//strong制相应数字正射影像图重绘，使最新的样式得到应用污染物。风格。高度=' 0px} else { contant。风格。高度='自动'；高度=contant。getboundingclientrect().身高；污染物。风格。高度=' 0 '；让f=文档。尸体。偏移光线；污染物。风格。高度=高度“px”；} } }，在销毁(){文档之前。尸体。风格。背景颜色=' # fff} }/脚本样式类型=' text/SCS ' lang=' SCS '作用域。交易记录-包装{利润-底部： 100px。隐藏标题-内容{溢出：/* 这个是重点*/.title { height : 84 xpadding : 0 24 pxborder-bottom : 1 px实心# eaeaea/* px */H3 {高度： 84pxfont-size : 28pxcolor : # 333 display : flexalign-items :居中；向左浮动：左边距left: 10px}。编号{ height : 84 px font-size : 24 px；color : # 666 display : flex align-items :居中；向右浮动：} .数字I { display : inline-block；宽度： 23px高度： 13px背景： url('././资产/图像/[电子邮件保护]')；背景-重复：不重复；背景尺寸尺寸： 23px 13px背景-位置：右侧6px中心；填充-右侧： 35pxdisplay : flex align-items :居中；向右浮动：transform : rotatex(0度)；} } .contant { background: # fff高度1s过渡：/* 这个也是重点*/ul Li { padd : 0 24px；height : 142 pxdisplay : flex align-items :居中；} ul Li : not(: last-child){边框-底部： 1px实心# f6f 6；/* px */} } } } } }样式以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。