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 相关文章推荐
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
使用js判断当前时区TimeZone是否是夏令时
Feb 23 Javascript
JS实现的5级联动Select下拉选择框实例
Aug 17 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
解决VUEX刷新的时候出现数据消失
Jul 03 Javascript
AugularJS从入门到实践(必看篇)
Jul 10 Javascript
最实用的JS数组函数整理
Dec 05 Javascript
微信{"errcode":48001,"errmsg":"api unauthorized, hints: [ req_id: 1QoCla0699ns81 ]"}
Oct 12 Javascript
JavaScript实现随机点名程序
Mar 25 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
Aug 14 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
在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
AM/FM收音机的安装与调试
2021/03/02 无线电
php UTF8 文件的签名问题
2009/10/30 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
检测codeigniter脚本消耗内存情况的方法
2015/03/21 PHP
php array_pop 删除数组最后一个元素实例
2016/11/02 PHP
PHP微信发送推送消息乱码的解决方法
2019/02/28 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
自己动手制作jquery插件之自动添加删除行的实现
2011/10/13 Javascript
Extjs单独定义各组件的实例代码
2013/06/25 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
jqplot通过ajax动态画折线图的方法及思路
2013/12/08 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
浅谈javascript中的 “ &amp;&amp; ” 和 “ || ”
2017/02/02 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
VUE 3D轮播图封装实现方法
2018/07/03 Javascript
jQuery实现checkbox全选功能完整实例
2018/07/12 jQuery
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
微信小程序中使用Async-await方法异步请求变为同步请求方法
2019/03/28 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
微信小程序实现上拉加载功能
2019/11/20 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
python变量不能以数字打头详解
2016/07/06 Python
用Python将mysql数据导出成json的方法
2018/08/21 Python
复化梯形求积分实例——用Python进行数值计算
2019/11/20 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
django自带的权限管理Permission用法说明
2020/05/13 Python
css3弹性盒模型(Flexbox)详细介绍
2014/10/08 HTML / CSS
质检部职责
2013/12/28 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
学校领导干部民主生活会整改方案
2014/09/29 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书
springboot集成redis存对象乱码的问题及解决
2022/06/16 Java/Android