From cfcd990efdaf9eabfae142b560e05863e37c8dfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 1 Jul 2020 15:41:55 +0800
Subject: [PATCH] fix: Menu transition finished by opacity (#25341)

---
 components/_util/motion.tsx | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 deletions(-)

diff --git a/components/_util/motion.tsx b/components/_util/motion.tsx
index efc7235ff4..fb3a321c4b 100644
--- a/components/_util/motion.tsx
+++ b/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,
 };