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

原创已于 2023-03-30 11:25:31 修改 · 8.9k 阅读

21 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

于 2021-07-06 14:43:20 首次发布

本文介绍了如何在Vue.js应用中禁用Element UI的菜单折叠过渡动画，并添加自定义的侧边栏宽度变化动画。通过设置`collapse-transition=false`可以关闭菜单的动画效果，同时通过CSS添加了针对侧边栏宽度变化的过渡动画，增强了用户体验。

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>

标签