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

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'
}

来源:https://segmentfault.com/a/1190000016280626

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值