fix: menu hide animate lose

Author: tangjinzhou

components/menu/src/PopupTrigger.tsx

@@ -7,6 +7,7 @@ import { placements, placementsRtl } from './placements';
 import type { RafFrame } from '../../_util/raf';
 import raf from '../../_util/raf';
 import classNames from '../../_util/classNames';
+import { getTransitionProps } from '../../_util/transition';
 
 const popupPlacementMap = {
   horizontal: 'bottomLeft',
@@ -40,6 +41,9 @@ export default defineComponent({
       triggerSubMenuAction,
       isRootMenu,
       forceSubMenuRender,
+      motion,
+      defaultMotions,
+      mode,
     } = useInjectMenu();
     const forceRender = useInjectForceRender();
     const placement = computed(() =>
@@ -68,6 +72,13 @@ export default defineComponent({
     const onVisibleChange = (visible: boolean) => {
       emit('visibleChange', visible);
     };
+    const style = ref({});
+    const className = ref('');
+    const mergedMotion = computed(() => {
+      const m = motion.value || defaultMotions.value?.[mode.value] || defaultMotions.value?.other;
+      const res = typeof m === 'function' ? m(style, className) : m;
+      return res ? getTransitionProps(res.name, { css: true }) : undefined;
+    });
     return () => {
       const { prefixCls, popupClassName, mode, popupOffset, disabled } = props;
       return (
@@ -93,6 +104,7 @@ export default defineComponent({
           mouseLeaveDelay={subMenuCloseDelay.value}
           onPopupVisibleChange={onVisibleChange}
           forceRender={forceRender || forceSubMenuRender.value}
+          popupAnimation={mergedMotion.value}
           v-slots={{
             popup: () => {
               return slots.popup?.({ visible: innerVisible.value });

components/menu/src/SubMenu.tsx

@@ -15,7 +15,6 @@ import useDirectionStyle from './hooks/useDirectionStyle';
 import PopupTrigger from './PopupTrigger';
 import SubMenuList from './SubMenuList';
 import InlineSubMenuList from './InlineSubMenuList';
-import Transition, { getTransitionProps } from '../../_util/transition';
 import { cloneElement } from '../../_util/vnode';
 import Overflow from '../../vc-overflow';
 import devWarning from '../../vc-util/devWarning';
@@ -93,8 +92,6 @@ export default defineComponent({
       registerMenuInfo,
       unRegisterMenuInfo,
       selectedSubMenuKeys,
-      motion,
-      defaultMotions,
       expandIcon: menuExpandIcon,
     } = useInjectMenu();
 
@@ -230,14 +227,6 @@ export default defineComponent({
 
     const renderMode = computed(() => (mode.value === 'horizontal' ? 'vertical' : mode.value));
 
-    const style = ref({});
-    const className = ref('');
-    const mergedMotion = computed(() => {
-      const m = motion.value || defaultMotions.value?.[mode.value] || defaultMotions.value?.other;
-      const res = typeof m === 'function' ? m(style, className) : m;
-      return res ? getTransitionProps(res.name) : undefined;
-    });
-
     const subMenuTriggerModeRef = computed(() =>
       triggerModeRef.value === 'horizontal' ? 'vertical' : triggerModeRef.value,
     );
@@ -291,13 +280,11 @@ export default defineComponent({
             disabled={mergedDisabled.value}
             onVisibleChange={onPopupVisibleChange}
             v-slots={{
-              popup: ({ visible }) => (
+              popup: () => (
                 <MenuContextProvider mode={subMenuTriggerModeRef.value} isRootMenu={false}>
-                  <Transition {...mergedMotion.value}>
-                    <SubMenuList v-show={visible} id={popupId} ref={popupRef}>
-                      {slots.default?.()}
-                    </SubMenuList>
-                  </Transition>
+                  <SubMenuList id={popupId} ref={popupRef}>
+                    {slots.default?.()}
+                  </SubMenuList>
                 </MenuContextProvider>
               ),
             }}

components/vc-trigger/Popup/PopupInner.tsx

@@ -83,7 +83,7 @@ export default defineComponent({
 
     // ======================== Motion ========================
     const motion = computed(() => {
-      const m = getMotion(props);
+      const m = typeof props.animation === 'object' ? props.animation : getMotion(props as any);
       ['onAfterEnter', 'onAfterLeave'].forEach(eventName => {
         m[eventName] = () => {
           goNextStatus();

components/vc-trigger/Popup/interface.ts

@@ -11,7 +11,7 @@ export const innerProps = {
   forceRender: Boolean,
 
   // Legacy Motion
-  animation: String,
+  animation: [String, Object],
   transitionName: String,
 
   // Measure