ant-design/components/_util/motion.tsx
叶枫 6e89866694
feat: 动画样式添加 prefix (#29268)
* feat: add prefix

* fix: 剩余

* fix: test

* fix: test

* fix: test

* fix: test

* fix: 传了 name 则使用传的

* fix: pop 添加 prefix

* fix: Ok OK ?

* fix: modal confirm

* fix: select

* fix: test
2021-02-08 17:09:13 +08:00

32 lines
1.2 KiB
TypeScript

import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
// ================== Collapse Motion ==================
const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
const getRealHeight: MotionEventHandler = node => ({ height: node.scrollHeight, opacity: 1 });
const getCurrentHeight: MotionEventHandler = node => ({ height: node.offsetHeight });
const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
(event as TransitionEvent).propertyName === 'height';
const collapseMotion: CSSMotionProps = {
motionName: 'ant-motion-collapse',
onAppearStart: getCollapsedHeight,
onEnterStart: getCollapsedHeight,
onAppearActive: getRealHeight,
onEnterActive: getRealHeight,
onLeaveStart: getCurrentHeight,
onLeaveActive: getCollapsedHeight,
onAppearEnd: skipOpacityTransition,
onEnterEnd: skipOpacityTransition,
onLeaveEnd: skipOpacityTransition,
motionDeadline: 500,
};
const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => {
if (transitionName !== undefined) {
return transitionName;
}
return `${rootPrefixCls}-${motion}`;
};
export { getTransitionName };
export default collapseMotion;