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

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

 

 

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

<ul class="newslist">
  <li v-for="(items, index) in proLists" :key="index">
    <p @click="openFunc(index)">
      <img src="/static/svg/tbm.svg" alt="">
      <span>{{items.name}}</span>
    </p>
    <div class="p" ref="liCon">
      <div>
        测试111
      </div>
    </div>
  </li>
</ul>

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

// 内容部分
.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.liCon[i]
  let height = liCon.offsetHeight
  if (height === this.liConHeight) { // 展开
    liCon.style.height = 'auto'
    height = liCon.offsetHeight
    liCon.style.height = this.liConHeight + 'px'
    // eslint-disable-next-line no-unused-vars
    let f = document.body.offsetHeight // 必加
    liCon.style.height = height + 'px'
  } else { // 收缩
    liCon.style.height = this.liConHeight + 'px'
  }

 备注：

如果需要手风琴的样式，每次点击只展开一个面板，循环proLists数据，除了当前的liCon，把其他的liCon的liConHeight高度设置为0即可。