vue.js 实现点击展开收起动画效果


Posted in Javascript onJuly 07, 2018

最近公司项目加了个页面,其中要求是这样的,点击对应列表,展开和收起,其实就是显示和隐藏内容部分;说来惭愧,我花了半天时间才搞出来(自黑一下~),接下来分享给大家,先上效果图:

vue.js 实现点击展开收起动画效果

vue页面:

<template>
  <div class="dealRecord-wrap">
    <div class="title-contant" v-for="(item,index) in items " >

      <div class="title" @click="showHide(index)">

        <h3>2018年0{{index+6}}月</h3>

        <div class="number">800笔<i></i></div>

      </div>

      <div class="contant">

        <ul>

          <li v-for="i in item.allNumber">
            {{index+6}}
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default{
  data(){
    return{
      items:[
        {v:'qqq',allNumber:1},

        {v:'aaa',allNumber:2},

        {v:'qqq',allNumber:3},

      ],
    }
  },
  created(){
    document.body.style.backgroundColor = '#f6f6f6';
  },

  mounted(){

    for(var i=0;i<3;i++){  //这里取值自后台返回的长度,设置页面渲染完成后是否展开,此处不展开

      document.getElementsByClassName('contant')[i].style.height = '0px';

    }

  },

  components:{

  },

  methods:{

    showHide(index){  //点击展开收起

      let contant = document.getElementsByClassName('contant')[index];  //这里我们通过参数index来让浏览器判断你点击的是哪一个列表  

      let height = contant.getBoundingClientRect().height;  //获取页面元素的当前高度

      document.getElementsByTagName('i')[index].style.transform = !!height?'rotateX(0deg)':'rotateX(180deg)';

      if (!!height) {

      contant.style.height = height + 'px';

      let f = document.body.offsetHeight; //强制相应dom重绘,使最新的样式得到应用

      contant.style.height = '0px';

      } else {

      contant.style.height = 'auto';

      height = contant.getBoundingClientRect().height;

      contant.style.height = '0';

      let f = document.body.offsetHeight;

      contant.style.height = height + 'px';

      }
    }
  },

  beforeDestroy(){
    document.body.style.backgroundColor = '#fff';
  }
}
</script>
<style type="text/scss" lang="scss" scoped>
.dealRecord-wrap{margin-bottom: 100px;

  .title-contant{overflow: hidden;  /* 这个是重点 */

    .title{height: 84px;padding: 0 24px;border-bottom: 1px solid #eaeaea;/*px*/

      h3{height: 84px;font-size: 28px;color: #333;display: flex;align-items: center;float: left;;margin-left: 10px;}

      .number{height: 84px;font-size: 24px;color: #666;display: flex;align-items: center;float: right;}

      .number i{display: inline-block;width: 23px;height: 13px;background: url('../../assets/images/icon_dropup@2x.png');background-repeat: no-repeat;background-size: 23px 13px;background-position: right 6px center;padding-right: 35px;display: flex;align-items: center; float: right;transform:rotateX(0deg);}

    }

    .contant{background: #fff;transition: height 1s;  /* 这个也是重点 */

      ul li{padding: 0 24px;height: 142px;display: flex;align-items: center;}

      ul li:not(:last-child){border-bottom: 1px solid #f6f6f6;/*px*/}
    }
  }
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。 

Javascript 相关文章推荐
JQuery 学习笔记01 JQuery初接触
May 06 Javascript
BootStrap智能表单实战系列(六)表单编辑页面的数据绑定
Jun 13 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
浅谈express 中间件机制及实现原理
Aug 31 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
vue中添加mp3音频文件的方法
Mar 02 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
layui--js控制switch的切换方法
Sep 03 Javascript
详解微信小程序中var、let、const用法与区别
Jan 11 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 #Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 #Javascript
小程序实现发表评论功能
Jul 06 #Javascript
vue中倒计时组件的实例代码
Jul 06 #Javascript
微信小程序websocket实现聊天功能
Mar 30 #Javascript
vue中锚点的三种方法
Jul 06 #Javascript
Angularjs中date过滤器失效的问题及解决方法
Jul 06 #Javascript
You might like
php access 数据连接与读取保存编辑数据的实现代码
2010/05/12 PHP
备份mysql数据库的php代码(一个表一个文件)
2010/05/28 PHP
PHP获取用户客户端真实IP的解决方案
2016/10/10 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
基于jQuery的ajax功能实现web service的json转化
2009/08/29 Javascript
JavaScript操作XML实例代码(获取新闻标题并分页,并分页)
2010/05/25 Javascript
jquery win 7透明弹出层效果的简单代码
2013/08/06 Javascript
Jquery之Bind方法参数传递与接收的三种方法
2014/06/24 Javascript
浅谈javascript属性onresize
2015/04/20 Javascript
jquery解析json格式数据的方法(对象、字符串)
2015/11/24 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
谈谈JavaScript中的几种借用方法
2016/08/09 Javascript
微信小程序 底部导航栏目开发资料
2016/12/05 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
阿里大于短信验证码node koa2的实现代码(最新)
2017/09/07 Javascript
vue与vue-i18n结合实现后台数据的多语言切换方法
2018/03/08 Javascript
JavaScript实现选项卡效果的分析及步骤
2019/04/16 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
bootstrap table实现iview固定列的效果实例代码详解
2019/09/30 Javascript
layui数据表格重载实现往后台传参
2019/11/15 Javascript
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
vue 使用vant插件做tabs切换和无限加载功能的实现
2020/11/04 Javascript
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
Python数字图像处理之霍夫线变换实现详解
2018/01/12 Python
对numpy中二进制格式的数据存储与读取方法详解
2018/11/01 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
Django框架model模型对象验证实现方法分析
2019/10/02 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
使用canvas对多图片拼合并导出图片的方法
2018/08/28 HTML / CSS
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
优秀毕业生求职信范文
2014/01/02 职场文书
创先争优活动个人总结
2015/03/04 职场文书
幼儿园教师个人工作总结2015
2015/05/12 职场文书
房产电话营销开场白
2015/05/29 职场文书
在JavaScript中如何使用宏详解
2021/05/06 Javascript