当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vuejs实现折叠面板展开收缩动画效果

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

2018年09月21日  | 移动技术网IT编程  | 我要评论

flash官方网站,重生之伊利丹,人民医院预约挂号

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

总结

以上所述是小编给大家介绍的vuejs实现折叠面板展开收缩动画效果，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网