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 相关文章推荐
jQuery html()等方法介绍
Nov 18 Javascript
ExtJs GridPanel简单的增删改实现代码
Aug 26 Javascript
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 Javascript
中文路径导致unitpngfix.js不正常的解决方法
Jun 26 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
js实现会跳动的日历效果(完整实例)
Oct 18 Javascript
vue父组件点击触发子组件事件的实例讲解
Feb 08 Javascript
vue .sync修饰符的使用详解
Jun 15 Javascript
JavaScript如何借用构造函数继承
Nov 06 Javascript
Js实现粘贴上传图片的原理及示例
Dec 09 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
快速开发一个PHP扩展图文教程
2008/12/12 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
php实现俄罗斯乘法实例
2015/03/07 PHP
php数组合并与拆分实例分析
2015/06/12 PHP
PHP编程计算日期间隔天数的方法
2017/04/26 PHP
PHP设计模式之委托模式定义与用法简单示例
2018/08/13 PHP
Gird事件机制初级读本
2007/03/10 Javascript
jQuery 自动增长的文本输入框实现代码
2010/04/02 Javascript
JavaScript中valueOf函数与toString方法深入理解
2012/12/02 Javascript
基于jquery实现图片相关操作(重绘、获取尺寸、调整大小、缩放)
2015/12/25 Javascript
Jquery和Js获得元素标签名称的方法总结
2016/10/08 Javascript
Angular中的interceptors拦截器
2017/06/25 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
[09:13]DOTA2-DPC中国联赛 正赛 Ehome vs Magma 选手采访 1月19日
2021/03/11 DOTA
python动态监控日志内容的示例
2014/02/16 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
python tkinter基本属性详解
2019/09/16 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
Python操作MySQL数据库的示例代码
2020/07/13 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
微软瑞士官方网站:Microsoft瑞士
2018/04/20 全球购物
美国购买隐形眼镜网站:Lenses For Less
2020/07/05 全球购物
学校门卫岗位职责
2014/03/16 职场文书
单位承诺书格式
2014/05/21 职场文书
仲裁协议书
2014/09/26 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
2016年八一建军节活动总结
2016/04/05 职场文书
2016年学校爱国卫生月活动总结
2016/04/06 职场文书
Pytest allure 命令行参数的使用
2021/04/18 Python
Vue图片裁剪组件实例代码
2021/07/02 Vue.js
Java9新特性之Module模块化编程示例演绎
2022/03/16 Java/Android