Vue2(三)实现子菜单展开收缩，带动画效果实现方法_csdn鼠标移入动画宽度 - CSDN文库

200 浏览量更新于2023-03-16 评论收藏 49KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

以前做这种操作就是简单的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样式：

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38739919

粉丝: 4
资源: 903

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈