Menu: add collapse-transition (#8809)

* Menu: add menu attribute - collapseTransition

Sometime we dont need collapse transition

* Menu: add docs & definition - collapseTransition

examples/docs/en-US/menu.md

@@ -308,6 +308,7 @@ Vertical NavMenu could be collapsed.
 | unique-opened  |  whether only one sub-menu can be active  | boolean   | — | false   |
 | menu-trigger | how sub-menus are triggered, only works when `mode` is 'horizontal' | string    | — | hover |
 | router  | whether `vue-router` mode is activated. If true, index will be used as 'path' to activate the route action | boolean   | — | false   |
+| collapse-transition  | whether the menu collapse transition is active | boolean   | — | true   |
 
 ### Menu Methods
 | Event Name | Description | Parameters |

examples/docs/zh-CN/menu.md

@@ -309,6 +309,7 @@
 | unique-opened  | 是否只保持一个子菜单的展开 | boolean   | — | false   |
 | menu-trigger  | 子菜单打开的触发方式(只在 mode 为 horizontal 时有效) | string   | — | hover   |
 | router  | 是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 | boolean   | — | false   |
+| collapse-transition  | 是否开启折叠动画 | boolean   | — | true   |
 
 ### Menu Methods
 | 事件名称      | 说明    | 参数      |

packages/menu/src/menu.vue

@@ -1,19 +1,4 @@
-<template>
+<script type="text/jsx">
-  <el-menu-collapse-transition>
-    <ul class="el-menu"
-      :key="+collapse"
-      :style="{ backgroundColor: backgroundColor || '' }"
-      :class="{
-        'el-menu--horizontal': mode === 'horizontal',
-        'el-menu--collapse': collapse
-      }"
-      role="menubar"
-    >
-      <slot></slot>
-    </ul>
-  </el-menu-collapse-transition>
-</template>
-<script>
   import emitter from 'element-ui/src/mixins/emitter';
   import Migrating from 'element-ui/src/mixins/migrating';
   import Menubar from 'element-ui/src/utils/menu/aria-menubar';
@@ -22,6 +7,33 @@
   export default {
     name: 'ElMenu',
 
+    render (h) {
+      const component = (
+        <ul
+          role="menubar"
+          key={ +this.collapse }
+          style={{ backgroundColor: this.backgroundColor || '' }}
+          class={{
+            'el-menu--horizontal': this.mode === 'horizontal',
+            'el-menu--collapse': this.collapse,
+            "el-menu": true
+          }}
+        >
+          { this.$slots.default }
+        </ul>
+      );
+
+      if (this.collapseTransition) {
+        return (
+          <el-menu-collapse-transition>
+            { component }
+          </el-menu-collapse-transition>
+        );
+      } else {
+        return component;
+      }
+    },
+
     componentName: 'ElMenu',
 
     mixins: [emitter, Migrating],
@@ -104,7 +116,11 @@
       collapse: Boolean,
       backgroundColor: String,
       textColor: String,
-      activeTextColor: String
+      activeTextColor: String,
+      collapseTransition: {
+        type: Boolean,
+        default: true
+      }
     },
     data() {
       return {

types/menu.d.ts

@@ -34,4 +34,7 @@ export declare class ElMenu extends ElementUIComponent {
 
   /** Whether vue-router mode is activated. If true, index will be used as 'path' to activate the route action */
   router: boolean
+
+  /** Whether the menu collapse transition is active */
+  collapseTransition: boolean
 }