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 相关文章推荐
IE autocomplete internet explorer's autocomplete
Jun 30 Javascript
JavaScript中的small()方法使用详解
Jun 08 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
详解Document.Cookie
Dec 25 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
Base64(二进制)图片编码解析及在各种浏览器的兼容性处理
Feb 09 Javascript
Bootstrap fileinput文件上传组件使用详解
Jun 06 Javascript
JS实现快速比较两个字符串中包含有相同数字的方法
Sep 11 Javascript
用Axios Element实现全局的请求loading的方法
Mar 15 Javascript
Node.js笔记之process模块解读
May 31 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
Jun 01 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框架的性能
2008/01/10 PHP
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
nginx+php-fpm配置文件的组织结构介绍
2012/11/07 PHP
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
关于php中一些字符串总结
2016/05/05 PHP
YII2框架中添加自定义模块的方法实例分析
2020/03/18 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
js 跳出页面的frameset框架示例介绍
2013/12/23 Javascript
将查询条件的input、select清空
2014/01/14 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
采用call方式实现js继承
2014/05/20 Javascript
一分钟理解js闭包
2016/05/04 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
AngularJS ng-repeat指令及Ajax的应用实例分析
2017/07/06 Javascript
node.js基于express使用websocket的方法
2017/11/09 Javascript
React Native中NavigatorIOS组件的简单使用详解
2018/01/27 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
jsonp实现百度下拉框功能的方法分析
2019/05/10 Javascript
jQuery实现推拉门效果
2020/10/19 jQuery
JavaScript构造函数原理及实现流程解析
2020/11/19 Javascript
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
Django实现文件上传和下载功能
2019/10/06 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
CSS3实现多重边框的方法总结
2016/05/31 HTML / CSS
美国第一个网上卖鞋零售商:OnlineShoes.com
2017/09/24 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
技术总监岗位职责
2013/12/05 职场文书
遵纪守法演讲稿
2014/05/23 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2016廉政教育学习心得体会
2016/01/25 职场文书
SpringBoot集成Druid连接池连接MySQL8.0.11
2021/07/02 Java/Android
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers