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 继承机制的实现(待续)
May 18 Javascript
js 优化次数过多的循环 考虑到性能问题
Mar 05 Javascript
网站繁简切换的JS遇到页面卡死的解决方法
Mar 12 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
javascript实现框架高度随内容改变的方法
Jul 23 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
JavaScript树的深度优先遍历和广度优先遍历算法示例
Jul 30 Javascript
Mint UI组件库CheckList使用及踩坑总结
Dec 20 Javascript
高效jQuery选择器的5个技巧实例分析
Nov 26 jQuery
vue.js iview打包上线后字体图标不显示解决办法
Jan 20 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 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速度全攻略
2006/10/09 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
使用ob系列函数实现PHP网站页面静态化
2014/08/13 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
关于php微信订阅号开发之token验证后自动发送消息给订阅号但是没有消息返回的问题
2015/12/21 PHP
详解PHP中的序列化、反序列化操作
2017/03/21 PHP
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
JS+CSS实现Li列表隔行换色效果的方法
2015/02/16 Javascript
js实现鼠标划过给div加透明度的方法
2015/05/25 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
返回函数的JavaScript函数
2016/06/14 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
js实现图片懒加载效果
2017/07/17 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
clipboard.js在移动端复制失败的解决方法
2018/06/13 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
nodejs开发一个最简单的web服务器实例讲解
2020/01/02 NodeJs
React组件设计模式之组合组件应用实例分析
2020/04/29 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
[01:06:26]全国守擂赛第二周 Team Coach vs DeMonsTer
2020/04/28 DOTA
Python中文字符串截取问题
2015/06/15 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python二分法查找算法实现方法【递归与非递归】
2019/12/06 Python
numpy实现神经网络反向传播算法的步骤
2019/12/24 Python
python 使用elasticsearch 实现翻页的三种方式
2020/07/31 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
Nice Kicks网上商店:ShopNiceKicks.com
2018/12/25 全球购物
办公室领导干部作风整顿个人整改措施
2014/09/17 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
导游词之安徽九华山
2019/09/18 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
十大最强火系宝可梦,喷火龙上榜,第一名有双火属性
2022/03/18 日漫