解决elementui导航折叠卡顿的问题

随风随遇随缘

elementui导航折叠卡顿问题


第一种方法

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

第二种方法

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

• 侧边栏部分：
  

• 右侧头部导航部分：
  

第三种方法

更简单的方法实现，前提还是通过右侧头部导航的展开收起按钮控制left属性变化实现折叠动画或者通过el-aside按照第一种方式实现折叠动画后，不用关闭el-menu本身动画，而是给el-menu添加class，

之后加上如下样式即可。

1. // 解决侧边栏折叠卡顿的问题
   
2. .new-el-menu--sidebar:not(.el-menu--collapse) {
   
3.     width: 220px;
   
4. }

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/323522nrq.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！