Vue2(三)实现子菜单展开收缩,带动画效果
2018-01-01 18:00
513 查看
以前做这种操作就是简单的display:block,但现在用户的要求也越来越高,需要美观和动画感。
现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。
看下效果图:
点开效果:
其实原理比较简单,就是通过子菜单的 max-height: 0;和 max-height: 2000px来实现子菜单的显示和关闭。加上css3的 transition: max-height .3s;来实现动画效果。
子菜单的样式:
关键语句,子菜单的body默认样式
当子菜单追加open样式后,子菜单的body样式:
然后通过点击事件来实现子菜单的样式open的切换,则就轻松实现了菜单的收缩和展开了。
现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。
看下效果图:
点开效果:
其实原理比较简单,就是通过子菜单的 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');
相关文章推荐
- 在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
- vuejs实现折叠面板展开收缩动画效果
- 在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
- JS+CSS实现DIV层的展开、收缩效果
- ExtJs中实现tree节点,全部是单击展开和收缩效果,和收藏夹点击功能一样
- 使用CollapsiblePanelExtender实现展开和收缩效果以及Accordion控件
- jquery简单实现树形结构收缩展开效果
- Android自定义可动画展开收缩View的实现
- jQuery实现鼠标悬停3d菜单展开动画效果
- vue.js 实现点击展开收起动画效果
- Android实现带动画效果的可点击展开TextView
- 使用CollapsiblePanelExtender实现展开和收缩效果
- 自定义实现ExpandableListView收缩的简单动画效果
- JS实现的简单折叠展开动画效果示例
- Android属性动画实现布局的下拉展开效果
- OCiOS开发:表格视图实现腾讯好友列表展开收缩效果
- QQ列表的收缩展开,带动画效果
- ExpandableListView展开收缩加动画效果
- Android UI效果篇-(3)用属性动画实现收缩菜单