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 相关文章推荐
pjblog修改技巧汇总
Mar 12 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
jquery无法设置checkbox选中即没有变成选中状态
Mar 27 Javascript
jQuery验证表单格式的使用方法
Jan 10 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
基于jQuery实现文字打印动态效果
Apr 21 jQuery
JS 封装父页面子页面交互接口的实例代码
Jun 25 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
5个实用的JavaScript新特性
Jun 16 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+Ajax验证码验证用户登录
2016/07/20 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
JS 自定义函数缺省值的设置方法
2010/05/05 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
使用js判断控件是否获得焦点
2014/01/03 Javascript
自己用jQuery写了一个图片的马赛克消失效果
2014/05/04 Javascript
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
在AngularJS框架中处理数据建模的方式解析
2016/03/05 Javascript
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
vue实现局部刷新的实现示例
2019/04/16 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
[02:16]卖萌的僵尸 DOTA2神话信使飞僵小宝来袭
2014/03/24 DOTA
[10:28]2018DOTA2国际邀请赛寻真——VGJ.S寻梦之路
2018/08/15 DOTA
Python中GIL的使用详解
2018/10/03 Python
python:批量统计xml中各类目标的数量案例
2020/03/10 Python
python os模块常用的29种方法使用详解
2020/06/02 Python
python中@property的作用和getter setter的解释
2020/12/22 Python
医学毕业生自我鉴定
2013/10/30 职场文书
经销商培训邀请函
2014/01/21 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
市场部经理岗位职责
2014/04/10 职场文书
实习推荐信
2014/05/10 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
关于运动会广播稿300字
2014/10/05 职场文书
学校师德师风整改措施
2014/10/27 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
行政司机岗位职责
2015/04/10 职场文书
同事打架检讨书
2015/05/06 职场文书
离婚律师函范本
2015/05/27 职场文书
幼儿园小班开学寄语
2015/05/27 职场文书
学校元旦晚会开场白
2015/05/29 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
go语言-在mac下brew升级golang
2021/04/25 Golang