mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

fix: Menu transition finished by opacity (#25341)

Browse Source
This commit is contained in:
二货机器人 2020-07-01 15:41:55 +08:00 committed by GitHub
parent 382b8a78be
commit cfcd990efd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
components/_util/motion.tsx
View File

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