Vue2(三)实现子菜单展开收缩,带动画效果实现方法


Posted in Javascript onApril 28, 2019

以前做这种操作就是简单的display:block,但现在用户的要求也越来越高,需要美观和动画感。

现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。

看下效果图:

Vue2(三)实现子菜单展开收缩,带动画效果实现方法

点开效果:

Vue2(三)实现子菜单展开收缩,带动画效果实现方法

其实原理比较简单,就是通过子菜单的 max-height: 0;和 max-height: 2000px来实现子菜单的显示和关闭。加上css3的 transition: max-height .3s;来实现动画效果。

子菜单的样式:

.tree-son-menu{
  background-color: #FFF;

  .menu-body {
   z-index: 20;
   position: relative;
   color: #5f5f5f;
   overflow: hidden;
   max-height: 0;
   -webkit-transition: max-height .3s;
   transition: max-height .3s;
  }
  &.open .menu-body {
   max-height: 600px;
   -webkit-transition: max-height .5s;
   transition: max-height .5s
  }
  &.two-level{
   .row-item{
    .row-left{
     padding-left: .8rem;
    }
   }

  }
 }

关键语句,子菜单的body默认样式

max-height: 0;
 -webkit-transition: max-height .3s;
  transition: max-height .3s;

当子菜单追加open样式后,子菜单的body样式:

&.open .menu-body {
   max-height: 600px;
   -webkit-transition: max-height .5s;
   transition: max-height .5s
  }

 然后通过点击事件来实现子菜单的样式open的切换,则就轻松实现了菜单的收缩和展开了。

$(".tree-son-menu").toggleClass('open');

以上所述是小编给大家介绍的vue实现收缩展开详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
JavaScript中计算网页中某个元素的位置
Jun 10 Javascript
在JavaScript中操作时间之getMonth()方法的使用
Jun 10 Javascript
javascript实现连续赋值
Aug 10 Javascript
Javascript发送AJAX请求实例代码
Aug 21 Javascript
微信小程序 删除项目工程实现步骤
Nov 10 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
vue router-link传参以及参数的使用实例
Nov 10 Javascript
vue里面使用mui的弹出日期选择插件实例
Sep 16 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
javascript实现文字跑马灯效果
Jun 18 Javascript
js+html5 canvas实现ps钢笔抠图
Apr 28 #Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
Apr 28 #Javascript
详解微信小程序调用支付接口支付
Apr 28 #Javascript
Vue 中文本内容超出规定行数后展开收起的处理的实现方法
Apr 28 #Javascript
使用webpack编译es6代码的方法步骤
Apr 28 #Javascript
使用异步组件优化Vue应用程序的性能
Apr 28 #Javascript
详解微信小程序获取当前时间及日期的方法
Apr 28 #Javascript
You might like
使用laravel的Eloquent模型如何获取数据库的指定列
2019/10/17 PHP
关于图片验证码设计的思考
2007/01/29 Javascript
动态调用CSS文件的JS代码
2010/07/29 Javascript
Javascript对象属性方法汇总
2013/11/21 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
jQuery实现炫酷的鼠标轨迹特效
2015/02/01 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
JavaScript中的Repaint和Reflow用法详解
2015/07/27 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
详解如何让InstantClick兼容MathJax、百度统计等
2017/09/12 Javascript
vue-router+vuex addRoutes实现路由动态加载及菜单动态加载
2017/09/28 Javascript
分享vue里swiper的一些坑
2018/08/30 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
浅入深出Vue之自动化路由
2019/08/06 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
python在windows下实现备份程序实例
2014/07/04 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
django框架之cookie/session的使用示例(小结)
2018/10/15 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
python同时替换多个字符串方法示例
2019/09/17 Python
python网络编程:socketserver的基本使用方法实例分析
2020/04/09 Python
详解Django中views数据查询使用locals()函数进行优化
2020/08/24 Python
美国背景检查、公共记录和人物搜索网站:BeenVerified
2018/02/25 全球购物
美国班级戒指、帽子和礼服、毕业产品、年鉴:Balfour
2018/11/01 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
老师的检讨书
2014/02/23 职场文书
《月球之谜》教学反思
2014/04/10 职场文书
解除同居协议书
2015/01/29 职场文书
就业推荐表自我评价范文
2015/03/02 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
学习杨善洲同志先进事迹心得体会
2016/01/23 职场文书
MySQL Server 层四个日志
2022/03/31 MySQL