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动态添加表格数据行(ASP后台数据库保存例子)
May 08 Javascript
Javascript 面向对象 继承
May 13 Javascript
Chrome Form多次提交表单问题的解决方法
May 09 Javascript
IE与FireFox中的childNodes区别
Oct 20 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
JS实现带提示的星级评分效果完整实例
Oct 30 Javascript
AngularJS入门教程之 XMLHttpRequest实例讲解
Jul 27 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 Javascript
使用layui定义一个模块并使用的例子
Sep 14 Javascript
在layui框架中select下拉框监听更改事件的例子
Sep 20 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
Joomla使用Apache重写模式的方法
2016/05/04 PHP
JavaScript设置IFrame高度自适应(兼容各主流浏览器)
2013/06/05 Javascript
js 弹出框只弹一次(二次修改之后的)
2013/11/26 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
Angularjs结合Bootstrap制作的一个TODO List
2016/08/18 Javascript
JQuery控制DIV的选取实现方法
2016/09/18 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
微信小程序实现底部导航
2018/11/05 Javascript
Vue中图片Src使用变量的方法
2019/10/30 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
微信小程序事件流原理解析
2019/11/27 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
MySQLdb ImportError: libmysqlclient.so.18解决方法
2014/08/21 Python
python操作ie登陆土豆网的方法
2015/05/09 Python
Python 专题四 文件基础知识
2017/03/20 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
德国古洛迷亚百货官网:GALERIA Kaufhof
2017/06/20 全球购物
三月学雷锋活动总结
2014/06/26 职场文书
社会实践活动总结范文
2014/07/03 职场文书
2014大四本科生自我鉴定总结
2014/10/04 职场文书
出差报告格式模板
2014/11/06 职场文书
测量员岗位职责
2015/02/14 职场文书
2015年安全生产工作总结范文
2015/04/02 职场文书
《1942》观后感
2015/06/08 职场文书
处世之道:关于真诚相待的名言推荐
2019/12/02 职场文书
python实现过滤敏感词
2021/05/08 Python
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
《黑岩★★射手 DAWN FALL》BD发售宣传CM公开
2022/04/04 日漫
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle