2021-09-25 08:51:32 +00:00
|
|
|
import type {
|
|
|
|
BaseTransitionProps,
|
|
|
|
CSSProperties,
|
|
|
|
Ref,
|
|
|
|
TransitionGroupProps,
|
|
|
|
TransitionProps,
|
|
|
|
} from 'vue';
|
|
|
|
import {
|
|
|
|
onUpdated,
|
|
|
|
getCurrentInstance,
|
|
|
|
defineComponent,
|
|
|
|
nextTick,
|
|
|
|
Transition as T,
|
|
|
|
TransitionGroup as TG,
|
|
|
|
} from 'vue';
|
2022-04-12 06:03:30 +00:00
|
|
|
import { tuple } from './type';
|
|
|
|
|
|
|
|
const SelectPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
|
|
|
|
export type SelectCommonPlacement = typeof SelectPlacements[number];
|
|
|
|
|
|
|
|
const getTransitionDirection = (placement: SelectCommonPlacement | undefined) => {
|
|
|
|
if (placement !== undefined && (placement === 'topLeft' || placement === 'topRight')) {
|
|
|
|
return `slide-down`;
|
|
|
|
}
|
|
|
|
return `slide-up`;
|
|
|
|
};
|
2020-10-22 14:45:21 +00:00
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
export const getTransitionProps = (transitionName: string, opt: TransitionProps = {}) => {
|
2020-10-22 15:27:18 +00:00
|
|
|
if (process.env.NODE_ENV === 'test') {
|
2020-10-25 15:06:03 +00:00
|
|
|
return opt;
|
2020-10-22 15:27:18 +00:00
|
|
|
}
|
2021-09-25 08:51:32 +00:00
|
|
|
const transitionProps: TransitionProps = transitionName
|
2020-10-22 14:45:21 +00:00
|
|
|
? {
|
2022-04-01 14:20:10 +00:00
|
|
|
name: transitionName,
|
2020-10-22 14:45:21 +00:00
|
|
|
appear: true,
|
2021-09-25 08:51:32 +00:00
|
|
|
// type: 'animation',
|
2021-08-11 08:41:23 +00:00
|
|
|
// appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
|
2020-10-22 14:45:21 +00:00
|
|
|
// appearActiveClass: `antdv-base-transtion`,
|
2021-09-25 08:51:32 +00:00
|
|
|
// appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
|
2020-10-22 14:45:21 +00:00
|
|
|
enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
|
2021-12-11 06:59:52 +00:00
|
|
|
enterActiveClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
|
2020-10-22 14:45:21 +00:00
|
|
|
enterToClass: `${transitionName}-enter ${transitionName}-enter-active`,
|
|
|
|
leaveFromClass: ` ${transitionName}-leave`,
|
2022-03-04 03:50:11 +00:00
|
|
|
leaveActiveClass: `${transitionName}-leave`,
|
2020-10-22 14:45:21 +00:00
|
|
|
leaveToClass: `${transitionName}-leave ${transitionName}-leave-active`,
|
|
|
|
...opt,
|
|
|
|
}
|
|
|
|
: { css: false, ...opt };
|
|
|
|
return transitionProps;
|
|
|
|
};
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
export const getTransitionGroupProps = (transitionName: string, opt: TransitionProps = {}) => {
|
|
|
|
const transitionProps: TransitionGroupProps = transitionName
|
2020-10-22 14:45:21 +00:00
|
|
|
? {
|
2022-04-01 14:20:10 +00:00
|
|
|
name: transitionName,
|
2020-10-22 14:45:21 +00:00
|
|
|
appear: true,
|
2021-08-11 08:41:23 +00:00
|
|
|
// appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
|
2020-10-22 14:45:21 +00:00
|
|
|
appearActiveClass: `${transitionName}`,
|
|
|
|
appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
|
|
|
|
enterFromClass: `${transitionName}-appear ${transitionName}-enter ${transitionName}-appear-prepare ${transitionName}-enter-prepare`,
|
|
|
|
enterActiveClass: `${transitionName}`,
|
|
|
|
enterToClass: `${transitionName}-enter ${transitionName}-appear ${transitionName}-appear-active ${transitionName}-enter-active`,
|
|
|
|
leaveActiveClass: `${transitionName} ${transitionName}-leave`,
|
|
|
|
leaveToClass: `${transitionName}-leave-active`,
|
|
|
|
...opt,
|
|
|
|
}
|
|
|
|
: { css: false, ...opt };
|
|
|
|
return transitionProps;
|
|
|
|
};
|
|
|
|
|
|
|
|
let Transition = T;
|
|
|
|
let TransitionGroup = TG;
|
|
|
|
|
2021-12-17 08:23:11 +00:00
|
|
|
if (process.env.NODE_ENV === 'test') {
|
|
|
|
let warn = true;
|
2021-06-26 06:27:26 +00:00
|
|
|
Transition = defineComponent({
|
|
|
|
name: 'TransitionForTest',
|
|
|
|
inheritAttrs: false,
|
|
|
|
setup(_props, { slots, attrs }) {
|
|
|
|
const instance = getCurrentInstance();
|
2021-12-17 08:23:11 +00:00
|
|
|
if (warn) {
|
|
|
|
console.warn('application runing at test env, you should build use production env');
|
|
|
|
warn = false;
|
|
|
|
}
|
2021-08-25 15:40:57 +00:00
|
|
|
onUpdated(() => {
|
2021-06-26 06:27:26 +00:00
|
|
|
const child = instance.subTree.children[0];
|
|
|
|
if (child && child.dirs && child.dirs[0]) {
|
|
|
|
const value = child.dirs[0].value;
|
|
|
|
const oldValue = child.dirs[0].oldValue;
|
|
|
|
if (!value && value !== oldValue) {
|
|
|
|
nextTick(() => {
|
|
|
|
if (attrs.onAfterLeave) {
|
|
|
|
(attrs as any).onAfterLeave(instance.vnode.el);
|
|
|
|
}
|
|
|
|
});
|
2020-10-25 15:06:03 +00:00
|
|
|
}
|
2021-06-26 06:27:26 +00:00
|
|
|
}
|
|
|
|
});
|
|
|
|
return () => {
|
|
|
|
return slots.default?.();
|
|
|
|
};
|
|
|
|
},
|
|
|
|
}) as any;
|
2020-10-22 14:45:21 +00:00
|
|
|
TransitionGroup = defineComponent({
|
2020-10-26 10:31:50 +00:00
|
|
|
name: 'TransitionGroupForTest',
|
2020-10-22 14:51:50 +00:00
|
|
|
inheritAttrs: false,
|
2020-10-22 14:45:21 +00:00
|
|
|
props: ['tag', 'class'],
|
|
|
|
setup(props, { slots }) {
|
|
|
|
return () => {
|
2020-11-07 14:43:31 +00:00
|
|
|
const { tag: Tag, ...rest } = props;
|
2020-10-26 10:31:50 +00:00
|
|
|
const children = slots.default?.() || [];
|
2020-10-27 15:02:45 +00:00
|
|
|
if (Tag) {
|
|
|
|
return <Tag {...rest}>{children}</Tag>;
|
2020-10-26 10:31:50 +00:00
|
|
|
} else {
|
|
|
|
return children;
|
|
|
|
}
|
2020-10-22 14:45:21 +00:00
|
|
|
};
|
|
|
|
},
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2021-06-07 09:35:03 +00:00
|
|
|
export declare type MotionEvent = (TransitionEvent | AnimationEvent) & {
|
|
|
|
deadline?: boolean;
|
|
|
|
};
|
|
|
|
|
|
|
|
export declare type MotionEventHandler = (element: Element, done?: () => void) => CSSProperties;
|
|
|
|
|
|
|
|
export declare type MotionEndEventHandler = (element: Element, done?: () => void) => boolean | void;
|
|
|
|
|
|
|
|
// ================== Collapse Motion ==================
|
|
|
|
const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
|
|
|
|
const getRealHeight: MotionEventHandler = node => ({
|
|
|
|
height: `${node.scrollHeight}px`,
|
|
|
|
opacity: 1,
|
|
|
|
});
|
|
|
|
const getCurrentHeight: MotionEventHandler = (node: any) => ({ height: `${node.offsetHeight}px` });
|
|
|
|
// const skipOpacityTransition: MotionEndEventHandler = (_, event) =>
|
|
|
|
// (event as TransitionEvent).propertyName === 'height';
|
|
|
|
|
|
|
|
export interface CSSMotionProps extends Partial<BaseTransitionProps<Element>> {
|
|
|
|
name?: string;
|
|
|
|
css?: boolean;
|
|
|
|
}
|
|
|
|
|
2022-03-12 01:56:32 +00:00
|
|
|
const collapseMotion = (
|
|
|
|
name = 'ant-motion-collapse',
|
|
|
|
style: Ref<CSSProperties>,
|
|
|
|
className: Ref<string>,
|
|
|
|
): CSSMotionProps => {
|
2021-06-07 09:35:03 +00:00
|
|
|
return {
|
2022-03-12 01:56:32 +00:00
|
|
|
name,
|
2021-06-07 09:35:03 +00:00
|
|
|
appear: true,
|
|
|
|
css: true,
|
|
|
|
onBeforeEnter: node => {
|
2022-03-12 01:56:32 +00:00
|
|
|
className.value = name;
|
2021-06-07 09:35:03 +00:00
|
|
|
style.value = getCollapsedHeight(node);
|
|
|
|
},
|
|
|
|
onEnter: node => {
|
|
|
|
nextTick(() => {
|
|
|
|
style.value = getRealHeight(node);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
onAfterEnter: () => {
|
|
|
|
className.value = '';
|
|
|
|
style.value = {};
|
|
|
|
},
|
|
|
|
onBeforeLeave: node => {
|
2022-03-12 01:56:32 +00:00
|
|
|
className.value = name;
|
2021-06-07 09:35:03 +00:00
|
|
|
style.value = getCurrentHeight(node);
|
|
|
|
},
|
|
|
|
onLeave: node => {
|
2021-11-29 09:53:09 +00:00
|
|
|
setTimeout(() => {
|
2021-06-07 09:35:03 +00:00
|
|
|
style.value = getCollapsedHeight(node);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
onAfterLeave: () => {
|
|
|
|
className.value = '';
|
|
|
|
style.value = {};
|
|
|
|
},
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
2021-09-25 08:51:32 +00:00
|
|
|
const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => {
|
|
|
|
if (transitionName !== undefined) {
|
|
|
|
return transitionName;
|
|
|
|
}
|
|
|
|
return `${rootPrefixCls}-${motion}`;
|
|
|
|
};
|
|
|
|
|
2022-04-12 06:03:30 +00:00
|
|
|
export { Transition, TransitionGroup, collapseMotion, getTransitionName, getTransitionDirection };
|
2020-10-22 14:45:21 +00:00
|
|
|
|
|
|
|
export default Transition;
|