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下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
jQuery中将函数赋值给变量的调用方法
Mar 23 Javascript
JS添加删除一组文本框并对输入信息加以验证判断其正确性
Apr 11 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
javascript验证内容为数字以及长度为10的简单实例
Aug 20 Javascript
vue2滚动条加载更多数据实现代码
Jan 10 Javascript
Angular2 自定义validators的实现方法
Jul 05 Javascript
ReactNative页面跳转Navigator实现的示例代码
Aug 02 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
如何使用CocosCreator对象池
Apr 14 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
下载文件的点击数回填
2006/10/09 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
jquery tools 系列 scrollable学习
2009/09/06 Javascript
jQuery实现动画效果的实例代码
2013/05/07 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jquery常用方法及使用示例汇总
2014/11/08 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
2017/04/17 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
2018/01/31 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
2018/10/11 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
微信小程序 扭蛋抽奖机css3动画实现详解
2019/07/19 Javascript
vuex state中的数组变化监听实例
2019/11/06 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Python多进程编程技术实例分析
2014/09/16 Python
Python编程pygal绘图实例之XY线
2017/12/09 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
css3中背景尺寸background-size详解
2014/09/02 HTML / CSS
详解CSS3的opacity属性设置透明效果的用法
2016/05/09 HTML / CSS
CSS3制作hover下划线动画
2017/03/27 HTML / CSS
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
毕业证丢失证明
2014/01/15 职场文书
五年级英语教学反思
2014/01/31 职场文书
七一党日活动总结
2014/07/08 职场文书
励志演讲稿600字
2014/08/21 职场文书