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 相关文章推荐
jquery异步请求实例代码
Jun 21 Javascript
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
JS判断、校验MAC地址的2个实例
May 05 Javascript
js闭包实现按秒计数
Apr 23 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
ajax异步请求详解
Jan 06 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
iview中Select 选择器多选校验方法
Mar 15 Javascript
基于vue1和vue2获取dom元素的方法
Mar 17 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
jquery 动态遍历select 赋值的实例
Sep 12 jQuery
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
关于shopex同步ucenter的redirect问题,导致script不运行
2013/04/10 PHP
PHP简单操作MongoDB的方法(安装及增删改查)
2016/05/26 PHP
两个Javascript小tip资料
2010/11/23 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
网页打开自动最大化的js代码
2012/08/22 Javascript
浅析JavaScript中两种类型的全局对象/函数
2013/12/05 Javascript
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
javascript实现简单的贪吃蛇游戏
2015/03/31 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
纯js和css完成贪吃蛇小游戏demo
2016/09/01 Javascript
jquery购物车结算功能实现方法
2020/10/29 Javascript
移动端日期插件Mobiscroll.js使用详解
2016/12/19 Javascript
Node.js对MongoDB数据库实现模糊查询的方法
2017/05/03 Javascript
AngularJS 限定$scope的范围实例详解
2017/06/23 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
Vue使用vue-area-linkage实现地址三级联动效果的示例
2018/06/27 Javascript
Angular(5.2->6.1)升级小结
2018/12/27 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
vue-element-admin 菜单标签失效的解决方式
2019/11/12 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
python文件写入实例分析
2015/04/08 Python
Python中pillow知识点学习
2018/04/30 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Windows下python3.6.4安装教程
2018/07/31 Python
在IPython中执行Python程序文件的示例
2018/11/01 Python
Python如何实现大型数组运算(使用NumPy)
2020/07/24 Python
python中类与对象之间的关系详解
2020/12/16 Python
HTML5实现表单自动验证功能实例代码
2017/01/11 HTML / CSS
HTML5公共页面提取作为公用代码的方法
2020/06/30 HTML / CSS
广州品高软件.net笔面试题目
2012/04/18 面试题
医院总经理岗位职责
2014/02/04 职场文书
安全标准化实施方案
2014/02/20 职场文书
中秋节感想
2015/08/10 职场文书
Python实现对齐打印 format函数的用法
2022/04/28 Python