增加侧边栏菜单折叠动画效果切换与设置

src/layout/header-aside/components/menu-side/index.js

@@ -11,7 +11,7 @@ export default {
   render (h) {
     return h('div', { attrs: { class: 'd2-layout-header-aside-menu-side' } }, [
       h('el-menu', {
-        props: { collapse: this.asideCollapse, uniqueOpened: true, defaultActive: this.$route.fullPath },
+        props: { collapse: this.asideCollapse, collapseTransition: this.asideTransition, uniqueOpened: true, defaultActive: this.$route.fullPath },
         ref: 'menu',
         on: { select: this.handleMenuSelect }
       }, this.aside.map(menu => (menu.children === undefined ? elMenuItem : elSubmenu).call(this, h, menu))),
@@ -32,7 +32,8 @@ export default {
   computed: {
     ...mapState('d2admin/menu', [
       'aside',
-      'asideCollapse'
+      'asideCollapse',
+      'asideTransition'
     ])
   },
   watch: {

src/layout/header-aside/layout.vue

@@ -6,7 +6,11 @@
     <div class="d2-layout-header-aside-content" flex="dir:top">
       <!-- 顶栏 -->
       <div class="d2-theme-header" :style="{ opacity: this.searchActive ? 0.5 : 1 }" flex-box="0" flex>
-        <router-link to="/index" class="logo-group" :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}" flex-box="0">
+        <router-link
+          to="/index"
+          :class="{'logo-group': true, 'logo-transition': asideTransition}"
+          :style="{width: asideCollapse ? asideWidthCollapse : asideWidth}"
+          flex-box="0">
           <img v-if="asideCollapse" :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/icon-only.png`">
           <img v-else :src="`${$baseUrl}image/theme/${themeActiveSetting.name}/logo/all.png`">
         </router-link>
@@ -30,7 +34,14 @@
       <!-- 下面 主体 -->
       <div class="d2-theme-container" flex-box="1" flex>
         <!-- 主体 侧边栏 -->
-        <div flex-box="0" ref="aside" class="d2-theme-container-aside" :style="{ width: asideCollapse ? asideWidthCollapse : asideWidth, opacity: this.searchActive ? 0.5 : 1 }">
+        <div
+          flex-box="0"
+          ref="aside"
+          :class="{'d2-theme-container-aside': true, 'd2-theme-container-transition': asideTransition}"
+          :style="{
+            width: asideCollapse ? asideWidthCollapse : asideWidth,
+            opacity: this.searchActive ? 0.5 : 1
+          }">
           <d2-menu-side/>
         </div>
         <!-- 主体 -->
@@ -109,7 +120,8 @@ export default {
       keepAlive: state => state.page.keepAlive,
       grayActive: state => state.gray.active,
       transitionActive: state => state.transition.active,
-      asideCollapse: state => state.menu.asideCollapse
+      asideCollapse: state => state.menu.asideCollapse,
+      asideTransition: state => state.menu.asideTransition
     }),
     ...mapGetters('d2admin', {
       themeActiveSetting: 'theme/activeSetting'