vuejs实现折叠面板展开收缩动画效果

2019-11-19 13:00:52

字体：大中小

来源：转载

供稿：网友

vuejs通过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; }

重点是下面js的实现：

分为两种情况：

（一）初始状态是收缩时：

<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().heightif (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'}

总结

以上所述是小编给大家介绍的vuejs实现折叠面板展开收缩动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对武林网网站的支持！

上一篇：vue生成文件本地打开查看效果的实例

下一篇：在vue中读取本地Json文件的方法