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 工具函数学习资料
Apr 29 Javascript
基于jquery的网页SELECT下拉框美化代码
Oct 28 Javascript
关于ExtJS4.1:快捷键支持的问题
Apr 24 Javascript
AngularJS基础学习笔记之表达式
May 10 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
Aug 24 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
JS+jQuery实现注册信息的验证功能
Sep 26 jQuery
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
批量修改RAR文件注释的php代码
2010/11/20 PHP
php开发环境配置记录
2011/01/14 PHP
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
jQuery 使用手册(二)
2009/09/23 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
JavaScript插件化开发教程 (一)
2015/01/27 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
2018/10/20 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
python线程池的实现实例
2013/11/18 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python的迭代器和生成器
2015/07/29 Python
Python爬虫之模拟知乎登录的方法教程
2017/05/25 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
django模板获取list中指定索引的值方式
2020/05/14 Python
python合并多个excel文件的示例
2020/09/23 Python
Python 列表反转显示的四种方法
2020/11/16 Python
香港通票:Hong Kong Pass
2019/02/26 全球购物
自动化专业个人求职信范文
2013/12/30 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书
祝福语集锦:送给闺蜜的生日祝福语
2019/10/08 职场文书
Nginx源码编译安装过程记录
2021/11/17 Servers
十大公认最好看的动漫:《咒术回战》在榜,《钢之炼金术师》第一
2022/03/18 日漫
Java 异步任务计算FutureTask
2022/04/28 Java/Android