Vue Element Ui NavMenu导航菜单折叠展开会卡顿解决办法

1、首先给标签关闭动画效果:collapse-transition = "false"<el-menu :default-active="$route.path"class="el-menu-vertical-demo":collapse="isCollapse"background-color="#40586F"text-color="#fff"..

古古一

8833人浏览 · 2021-07-06 14:43:20

古古一 · 2021-07-06 14:43:20 发布

1、首先给标签关闭动画效果 :collapse-transition = "false"

<el-menu :default-active="$route.path"
         class="el-menu-vertical-demo"
         :collapse="isCollapse"
         background-color="#40586F"
         text-color="#fff"
         active-text-color="#409eff"
         :collapse-transition = "false"
         :unique-opened="true"
         router>
</ el-menu>

2、然后给侧边栏添加自定义动画

<style scoped>
    .el-aside {
      background: $primary-color;
      transition: width 0.15s;
      -webkit-transition: width 0.15s;
      -moz-transition: width 0.15s;
      -webkit-transition: width 0.15s;
      -o-transition: width 0.15s;
    }
</style>