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


Posted in Javascript onSeptember 06, 2018

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

Javascript 相关文章推荐
用javascript作一个通用向导说明
Aug 30 Javascript
浅谈javascript 函数内部属性
Jan 21 Javascript
JavaScript生成的动态下雨背景效果实现方法
Feb 25 Javascript
D3.js实现文本的换行详解
Oct 14 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
vue写h5页面的方法总结
Feb 12 Javascript
js使用cookie实现记住用户名功能示例
Jun 13 Javascript
jQuery/JS监听input输入框值变化实例
Oct 17 jQuery
浅谈VUE中演示v-for为什么要加key
Jan 16 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
Vue生命周期activated之返回上一页不重新请求数据操作
Jul 26 Javascript
在vue中读取本地Json文件的方法
Sep 06 #Javascript
浅谈Vue render函数在ElementUi中的应用
Sep 06 #Javascript
解决vue同一slot在组件中渲染多次的问题
Sep 06 #Javascript
vue template中slot-scope/scope的使用方法
Sep 06 #Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 #Javascript
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
Vue下拉框回显并默认选中随机问题
Sep 06 #Javascript
You might like
xml在joomla表单中的应用详解分享
2012/07/19 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
firefox插件Firebug的使用教程
2010/01/02 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
ASP.NET jQuery 实例3 (在TextBox里面阻止复制、剪切和粘贴事件)
2012/01/13 Javascript
从零学JS之你需要了解的几本书
2014/05/19 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
JavaScript中用字面量创建对象介绍
2014/12/31 Javascript
angular+ionic 的app上拉加载更新数据实现方法
2017/01/16 Javascript
基于React实现表单数据的添加和删除详解
2017/03/14 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
vue 中Virtual Dom被创建的方法
2019/04/15 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
Vue el-autocomplete远程搜索下拉框并实现自动填充功能(推荐)
2019/10/25 Javascript
Antd中单个DatePicker限定时间输入范围操作
2020/10/29 Javascript
Vue 401配合Vuex防止多次弹框的案例
2020/11/11 Javascript
初步探究Python程序的执行原理
2015/04/11 Python
从头学Python之编写可执行的.py文件
2017/11/28 Python
python判断完全平方数的方法
2018/11/13 Python
Python实现的企业粉丝抽奖功能示例
2019/07/26 Python
详解HTML5中download属性的应用
2015/08/06 HTML / CSS
HTML5有哪些新特征
2015/12/01 HTML / CSS
玉兰油美国官网:OLAY美国
2018/10/25 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
英国在线滑雪板和冲浪商店:The Board Basement
2020/01/11 全球购物
NHL官方在线商店:Shop.NHL.com
2020/05/01 全球购物
令人啧啧称赞的经理推荐信
2013/11/07 职场文书
学生会主席就职演讲稿
2014/01/14 职场文书
商场中秋节活动方案
2014/02/07 职场文书
学习标兵获奖感言
2014/02/20 职场文书
餐饮周年庆活动方案
2014/08/14 职场文书
2015羊年春节慰问信
2015/02/14 职场文书
Python 制作自动化翻译工具
2021/04/25 Python
JS 基本概念详细介绍
2021/10/16 Javascript
Java如何实现通过键盘输入一个数组
2022/02/15 Java/Android