refactor: menu

components/_util/transition.tsx

@@ -108,9 +108,15 @@ const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeigh
 // const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
 //   (event as TransitionEvent).propertyName === 'height';
 
-const collapseMotion: BaseTransitionProps<HTMLElement> = {
-  // motionName: 'ant-motion-collapse',
+export interface CSSMotionProps extends Partial<BaseTransitionProps<HTMLElement>> {
+  name?: string;
+  css?: boolean;
+}
+
+const collapseMotion: CSSMotionProps = {
+  name: 'ant-motion-collapse',
   appear: true,
+  css: false,
   // onAppearStart: getCollapsedHeight,
   onBeforeEnter: getCollapsedHeight,
   onEnter: getRealHeight,

components/menu/src/Menu.tsx

@@ -9,13 +9,14 @@ import {
   watchEffect,
   watch,
   reactive,
+  onMounted,
 } from 'vue';
 import shallowEqual from '../../_util/shallowequal';
 import useProvideMenu, { StoreMenuInfo, useProvideFirstLevel } from './hooks/useMenuContext';
 import useConfigInject from '../../_util/hooks/useConfigInject';
 import { MenuTheme, MenuMode, BuiltinPlacements, TriggerSubMenuAction } from './interface';
 import devWarning from 'ant-design-vue/es/vc-util/devWarning';
-import { collapseMotion } from 'ant-design-vue/es/_util/transition';
+import { collapseMotion, CSSMotionProps } from 'ant-design-vue/es/_util/transition';
 
 export const menuProps = {
   prefixCls: String,
@@ -24,6 +25,8 @@ export const menuProps = {
   overflowDisabled: Boolean,
   openKeys: Array,
 
+  motion: Object as PropType<CSSMotionProps>,
+
   theme: { type: String as PropType<MenuTheme>, default: 'light' },
   mode: { type: String as PropType<MenuMode>, default: 'vertical' },
 
@@ -59,6 +62,10 @@ export default defineComponent({
       return inlineCollapsed;
     });
 
+    const isMounted = ref(false);
+    onMounted(() => {
+      isMounted.value = true;
+    });
     watchEffect(() => {
       devWarning(
         !('inlineCollapsed' in props && props.mode !== 'inline'),
@@ -115,9 +122,9 @@ export default defineComponent({
     });
 
     const defaultMotions = {
-      horizontal: { motionName: `ant-slide-up` },
+      horizontal: { name: `ant-slide-up` },
       inline: collapseMotion,
-      other: { motionName: `ant-zoom-big` },
+      other: { name: `ant-zoom-big` },
     };
 
     useProvideFirstLevel(true);
@@ -176,7 +183,8 @@ export default defineComponent({
       inlineCollapsed: mergedInlineCollapsed,
       antdMenuTheme: computed(() => props.theme),
       siderCollapsed,
-      defaultMotions,
+      defaultMotions: computed(() => (isMounted.value ? defaultMotions : null)),
+      motion: computed(() => (isMounted.value ? props.motion : null)),
       overflowDisabled: computed(() => props.overflowDisabled),
       onOpenChange: onInternalOpenChange,
       registerMenuInfo,

components/menu/src/SubMenu.tsx

@@ -182,14 +182,6 @@ export default defineComponent({
       );
     };
 
-    const className = computed(() =>
-      classNames(
-        prefixCls.value,
-        `${prefixCls.value}-sub`,
-        `${prefixCls.value}-${mode.value === 'inline' ? 'inline' : 'vertical'}`,
-      ),
-    );
-
     // Cache mode if it change to `inline` which do not have popup motion
     const triggerModeRef = computed(() => {
       return mode.value !== 'inline' && keysPath.value.length > 1 ? 'vertical' : mode.value;
@@ -266,7 +258,6 @@ export default defineComponent({
             class={classNames(
               subMenuPrefixClsValue,
               `${subMenuPrefixClsValue}-${mode.value}`,
-              className.value,
               attrs.class,
               {
                 [`${subMenuPrefixClsValue}-open`]: open.value,

components/menu/src/hooks/useMenuContext.ts

@@ -1,6 +1,7 @@
 import { Key } from '../../../_util/type';
 import { ComputedRef, defineComponent, inject, InjectionKey, provide, Ref, UnwrapRef } from 'vue';
 import { BuiltinPlacements, MenuMode, MenuTheme, TriggerSubMenuAction } from '../interface';
+import { CSSMotionProps } from '../../../_util/transition';
 
 export interface StoreMenuInfo {
   eventKey: string;
@@ -46,8 +47,8 @@ export interface MenuContextProps {
   inlineIndent: ComputedRef<number>;
 
   // // Motion
-  motion?: any;
-  defaultMotions?: Partial<{ [key in MenuMode | 'other']: any }>;
+  motion?: ComputedRef<CSSMotionProps | null>;
+  defaultMotions?: ComputedRef<Partial<{ [key in MenuMode | 'other']: CSSMotionProps }> | null>;
 
   // // Popup
   subMenuOpenDelay: ComputedRef<number>;

v2-doc

@@ -1 +1 @@
-Subproject commit a7013ae87f69dcbcf547f4b023255b8a7a775557
+Subproject commit d197053285b81e77718621c0b5b94cb3b21831a2