refactor: menu

components/_util/transition.tsx

@@ -92,23 +92,20 @@ export declare type MotionEvent = (TransitionEvent | AnimationEvent) & {
 };
 
 export declare type MotionEventHandler = (
-  element: HTMLElement,
+  element: Element,
   done?: () => void,
 ) => CSSProperties | void;
 
-export declare type MotionEndEventHandler = (
-  element: HTMLElement,
-  done?: () => void,
-) => boolean | void;
+export declare type MotionEndEventHandler = (element: Element, done?: () => void) => boolean | void;
 
 // ================== Collapse Motion ==================
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
 const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 });
-const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight });
+const getCurrentHeight: MotionEventHandler = (node: any) => ({ height: node.offsetHeight });
 // const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
 //   (event as TransitionEvent).propertyName === 'height';
 
-export interface CSSMotionProps extends Partial<BaseTransitionProps<HTMLElement>> {
+export interface CSSMotionProps extends Partial<BaseTransitionProps<Element>> {
   name?: string;
   css?: boolean;
 }
@@ -116,7 +113,6 @@ export interface CSSMotionProps extends Partial<BaseTransitionProps<HTMLElement>
 const collapseMotion: CSSMotionProps = {
   name: 'ant-motion-collapse',
   appear: true,
-  css: false,
   // onAppearStart: getCollapsedHeight,
   onBeforeEnter: getCollapsedHeight,
   onEnter: getRealHeight,

components/menu/src/InlineSubMenuList.tsx

@@ -1,7 +1,9 @@
 import { computed, defineComponent, ref, watch } from '@vue/runtime-core';
+import Transition from 'ant-design-vue/es/_util/transition';
 import { useInjectMenu, MenuContextProvider } from './hooks/useMenuContext';
 import { MenuMode } from './interface';
 import SubMenuList from './SubMenuList';
+
 export default defineComponent({
   name: 'InlineSubMenuList',
   inheritAttrs: false,
@@ -12,10 +14,12 @@ export default defineComponent({
   },
   setup(props, { slots }) {
     const fixedMode: MenuMode = 'inline';
-    const { prefixCls, forceSubMenuRender, motion, mode } = useInjectMenu();
+    const { prefixCls, forceSubMenuRender, motion, mode, defaultMotions } = useInjectMenu();
     const sameModeRef = computed(() => mode.value === fixedMode);
     const destroy = ref(!sameModeRef.value);
 
+    const mergedOpen = computed(() => (sameModeRef.value ? props.open : false));
+
     // ================================= Effect =================================
     // Reset destroy state when mode change back
     watch(
@@ -27,9 +31,11 @@ export default defineComponent({
       },
       { flush: 'post' },
     );
-    let transitionProps = computed(() => {
-      return { appear: props.keyPath.length > 1, css: false };
-    });
+
+    const mergedMotion = computed(() => ({
+      ...(motion.value || defaultMotions.value?.[fixedMode]),
+      appear: props.keyPath.length <= 1,
+    }));
 
     return () => {
       if (destroy.value) {
@@ -42,7 +48,11 @@ export default defineComponent({
             locked: !sameModeRef.value,
           }}
         >
-          <SubMenuList id={props.id}>{slots.default?.()}</SubMenuList>
+          <Transition {...mergedMotion.value}>
+            <SubMenuList v-show={mergedOpen.value} id={props.id}>
+              {slots.default?.()}
+            </SubMenuList>
+          </Transition>
         </MenuContextProvider>
       );
     };