fix: Menu transition finished by opacity (#25341)

components/_util/motion.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 type MotionFunc = (element: HTMLElement) => React.CSSProperties;
+type MotionEndFunc = (element: HTMLElement, event: TransitionEvent) => boolean;
 
 interface Motion {
   visible?: boolean;
@@ -14,13 +15,13 @@ interface Motion {
   leavedClassName?: string;
   onAppearStart?: MotionFunc;
   onAppearActive?: MotionFunc;
-  onAppearEnd?: MotionFunc;
+  onAppearEnd?: MotionEndFunc;
   onEnterStart?: MotionFunc;
   onEnterActive?: MotionFunc;
-  onEnterEnd?: MotionFunc;
+  onEnterEnd?: MotionEndFunc;
   onLeaveStart?: MotionFunc;
   onLeaveActive?: MotionFunc;
-  onLeaveEnd?: MotionFunc;
+  onLeaveEnd?: MotionEndFunc;
 }
 
 // ================== Collapse Motion ==================
@@ -28,6 +29,10 @@ const getCollapsedHeight: MotionFunc = () => ({ height: 0, opacity: 0 });
 const getRealHeight: MotionFunc = node => ({ height: node.scrollHeight, opacity: 1 });
 const getCurrentHeight: MotionFunc = node => ({ height: node.offsetHeight });
 
+function skipOpacityTransition(_: HTMLElement, event: TransitionEvent) {
+  return event.propertyName === 'height';
+}
+
 const collapseMotion: Motion = {
   motionName: 'ant-motion-collapse',
   onAppearStart: getCollapsedHeight,
@@ -36,6 +41,11 @@ const collapseMotion: Motion = {
   onEnterActive: getRealHeight,
   onLeaveStart: getCurrentHeight,
   onLeaveActive: getCollapsedHeight,
+
+  onAppearEnd: skipOpacityTransition,
+  onEnterEnd: skipOpacityTransition,
+  onLeaveEnd: skipOpacityTransition,
+
   motionDeadline: 500,
 };