elementui导航折叠卡顿的问题

第一种方法:

网上很多建议使用el-aside去进行el-menu包裹,然后去除el-menu的折叠动画效果,之后给el-aside添加自定义动画效果控制width变化来实现折叠动画。

第二种方法:

这里提供另一个解决思路,和上面那种异曲同工,没有使用el-aside去进行布局,而是直接使用的el-menu实现的侧边栏,去掉侧边栏的折叠动画效果,之后把折叠动画效果交给右侧头部导航的展开收起按钮,通过它控制left属性变化实现。

核心代码实现:

侧边栏部分:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F5ByEcQT-1661537701046)(evernotecid://BE9DEFAA-6BBE-48DD-B45E-993AC7B26341/appyinxiangcom/36368386/ENResource/p364)]@h=300
右侧头部导航部分:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mn1dHGrN-1661537701047)(evernotecid://BE9DEFAA-6BBE-48DD-B45E-993AC7B26341/appyinxiangcom/36368386/ENResource/p365)]@h=300在这里插入图片描述[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sKK4Qy1E-1661537701047)(evernotecid://BE9DEFAA-6BBE-48DD-B45E-993AC7B26341/appyinxiangcom/36368386/ENResource/p367)]@w=600

第三种方法:

更简单的方法实现,前提还是通过右侧头部导航的展开收起按钮控制left属性变化实现折叠动画或者通过el-aside按照第一种方式实现折叠动画后,不用关闭el-menu本身动画,而是给el-menu添加class,
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8A2yWRY3-1661537701047)(evernotecid://BE9DEFAA-6BBE-48DD-B45E-993AC7B26341/appyinxiangcom/36368386/ENResource/p368)]@h=300

之后加上如下样式即可。

// 解决侧边栏折叠卡顿的问题
.new-el-menu--sidebar:not(.el-menu--collapse) {
    width: 220px;
}
GitHub 加速计划 / eleme / element
13
1
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:21 天前 )
c345bb45 1 年前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐