vue伸缩效果_vue折叠面板的收缩动画效果，实现点击按钮展开和收起，并有个高度过渡的动画效果...

1.上面是点击的部分，可自定义，下面是我项目的内容部分，下面的代码是功能部分的代码，去掉了不必要的部分记录。

代码：这部分，要注意的是样式。

• { {items.name}}

  测试111

样式部分，内容部分需要有个高度展开收起的动画效果：

// 内容部分

.newslist>li>div{

height: 0px;

overflow: hidden;

transition: height .3s; // 动画效果

}

2.data的部分，

data () {

return {

liConHeight: 0, // 折叠面板内容初始高度

proLists: [

{

name: '测试1',

},

{

name: '测试2',

},

],

}

}

3.js部分

// 项目折叠面板动画

openFunc (i) {

const liCon = this.$refs.li