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即可。