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 相关文章推荐
Js 获取当前日期时间及其它操作实现代码
Mar 04 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
DOM2非标准但却支持很好的几个属性小结
Jan 21 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
JavaScript 里的类数组对象
Apr 08 Javascript
用js读写cookie的简单方法(推荐)
Aug 08 Javascript
React组件之间的通信的实例代码
Jun 27 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
学习RxJS之JavaScript框架Cycle.js
Jun 17 Javascript
详解vue父子组件状态同步的最佳方式
Sep 10 Javascript
element-ui中el-upload多文件一次性上传的实现
Dec 02 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中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
php中json_encode中文编码问题分析
2011/09/13 PHP
PHP+Mysql+jQuery实现发布微博程序 jQuery篇
2011/10/08 PHP
PHP SPL标准库之数据结构堆(SplHeap)简单使用实例
2015/05/12 PHP
PHP实现的数独求解问题示例
2017/04/18 PHP
TP5框架实现签到功能的方法分析
2020/04/05 PHP
JavaScript支持的最大递归调用次数分析
2014/06/24 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
JavaScrip调试技巧之断点调试
2015/10/22 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
jQuery实现获取table表格第一列值的方法
2016/03/01 Javascript
Bootstrap与KnockoutJs相结合实现分页效果实例详解
2016/05/03 Javascript
JavaScript实现多栏目切换效果
2016/12/12 Javascript
微信小程序中使元素占满整个屏幕高度实现方法
2016/12/14 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
jquery简单实现纵向的无缝滚动代码实例
2019/04/01 jQuery
简单了解微信小程序 e.target与e.currentTarget的不同
2019/09/27 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
python中使用%与.format格式化文本方法解析
2017/12/27 Python
Python实现中一次读取多个值的方法
2018/04/22 Python
python通过tcp发送xml报文的方法
2018/12/28 Python
使用pandas读取文件的实现
2019/07/31 Python
汇集了世界上最好的天然和有机美容产品:LoveLula
2018/02/05 全球购物
Mountain Hardwear官网:攀岩服装和户外装备
2019/09/26 全球购物
斯福泰克软件测试面试题
2015/02/16 面试题
单位提档介绍信
2014/01/17 职场文书
元旦获奖感言
2014/03/08 职场文书
决心书标准格式
2014/03/11 职场文书
给校长的建议书
2014/03/12 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
合作意向书
2014/07/30 职场文书
Mybatis 一级缓存和二级缓存原理区别
2022/09/23 Java/Android