Vue.js 实现折叠面板高度自适应动画

Vue.js 折叠面板动画原理

在 Vue.js 开发中，可以通过 CSS3 技术实现元素高度从固定值到 auto 以及从 auto 到固定值的平滑过渡动画。

针对循环列表场景，HTML 结构如下：

<template>
 <div class="newslist">
  <ul>
   <li v-for="(item,index) in newslist" :key="index">
    <p class="p" ref="liCon">{{item.content}}</p>
    <div class="open" @click="open(item,index)">
     <div v-if="!item.openFlag">【展开】</div>
     <div v-else>【收缩】</div>
    </div>
   </li>
  </ul>
 </div>
</template>

在 CSS 样式中为相关元素添加 transition 属性以启用动画效果。

 .newslist ul li p {
  font-size: 14px;
  color: #555;
  line-height: 25px;
  height: 50px;
  overflow: hidden;
  transition: height .3s;
 }

核心逻辑在于 JavaScript 的实现，具体步骤如下：

需要区分两种不同的初始状态进行处理：

第一种情况是初始状态为收缩状态：

<script type="text/ecmascript-6">
 import Vue from 'vue'
 export default {
  props: ['newslist'],
  data() {
   return {
    liConHeight: 50 // 两行文字的高度
   }
  },
  methods: {
   open(item, i) {
    const liCon = this.$refs.liCon[i]
    var height = liCon.offsetHeight
    if (height === this.liConHeight) { // 展开
     liCon.style.height = 'auto'
     height = liCon.offsetHeight
     liCon.style.height = this.liConHeight + 'px'
     var f = document.body.offsetHeight // 必加
     liCon.style.height = height + 'px'
    } else { // 收缩
     liCon.style.height = this.liConHeight + 'px'
    }
    if (!item.openFlag) {
     Vue.set(item, 'openFlag', true)
    } else {
     Vue.set(item, 'openFlag', false)
    }
   }
  }
 }
</script>

第二种情况是初始状态为展开状态：

对上述逻辑进行适当调整：

var height = liCon.offsetHeight // 也可以是liCon.getBoundingClientRect().height
if (height === this.liConHeight) { // 展开
  liCon.style.height = 'auto'
  height = liCon.offsetHeight
  liCon.style.height = this.liConHeight + 'px'
  liCon.style.height = height + 'px'
} else { // 收缩
  liCon.style.height = height + 'px'
  var f = document.body.offsetHeight
  liCon.style.height = this.liConHeight + 'px'
}

总结

以上介绍了 Vue.js 实现折叠面板展开与收缩动画的具体方法，希望能为开发者提供参考。如有任何疑问，欢迎留言交流，小编将及时回复。感谢支持。