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, };