DDR爱好者之家

vuejs实现折叠面板展开收缩动画效果
站长资源 2024/11/26 佚名
27 1538
DDR爱好者之家 Design By 杰米

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实现折叠面板展开收缩动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米