Vue2(三)实现子菜单展开收缩,带动画效果实现方法
(编辑:jimmy 日期: 2024/11/3 浏览:3 次 )
以前做这种操作就是简单的display:block,但现在用户的要求也越来越高,需要美观和动画感。
现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。
看下效果图:
点开效果:
其实原理比较简单,就是通过子菜单的 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实现收缩展开详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
下一篇:js+html5 canvas实现ps钢笔抠图