elementui导航折叠卡顿的问题
第一种方法:
网上很多建议使用el-aside去进行el-menu包裹,然后去除el-menu的折叠动画效果,之后给el-aside添加自定义动画效果控制width变化来实现折叠动画。
第二种方法:
这里提供另一个解决思路,和上面那种异曲同工,没有使用el-aside去进行布局,而是直接使用的el-menu实现的侧边栏,去掉侧边栏的折叠动画效果,之后把折叠动画效果交给右侧头部导航的展开收起按钮,通过它控制left属性变化实现。
核心代码实现:
侧边栏部分:
右侧头部导航部分:
第三种方法:
更简单的方法实现,前提还是通过右侧头部导航的展开收起按钮控制left属性变化实现折叠动画或者通过el-aside按照第一种方式实现折叠动画后,不用关闭el-menu本身动画,而是给el-menu添加class,
之后加上如下样式即可。
// 解决侧边栏折叠卡顿的问题
.new-el-menu--sidebar:not(.el-menu--collapse) {
width: 220px;
}