ant-design-vue/components/_util/transition.tsx

132 lines
4.5 KiB
Vue

import type {
BaseTransitionProps,
CSSProperties,
Ref,
TransitionGroupProps,
TransitionProps,
} from 'vue';
import { nextTick, Transition, TransitionGroup } from 'vue';
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`;
};
export const getTransitionProps = (transitionName: string, opt: TransitionProps = {}) => {
const transitionProps: TransitionProps = transitionName
? {
name: transitionName,
appear: true,
// type: 'animation',
// appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
// appearActiveClass: `antdv-base-transtion`,
// appearToClass: `${transitionName}-appear ${transitionName}-appear-active`,
enterFromClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
enterActiveClass: `${transitionName}-enter ${transitionName}-enter-prepare`,
enterToClass: `${transitionName}-enter ${transitionName}-enter-active`,
leaveFromClass: ` ${transitionName}-leave`,
leaveActiveClass: `${transitionName}-leave ${transitionName}-leave-active`,
leaveToClass: `${transitionName}-leave ${transitionName}-leave-active`,
...opt,
}
: { css: false, ...opt };
return transitionProps;
};
export const getTransitionGroupProps = (transitionName: string, opt: TransitionProps = {}) => {
const transitionProps: TransitionGroupProps = transitionName
? {
name: transitionName,
appear: true,
// appearFromClass: `${transitionName}-appear ${transitionName}-appear-prepare`,
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;
};
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;
}
const collapseMotion = (
name = 'ant-motion-collapse',
style: Ref<CSSProperties>,
className: Ref<string>,
): CSSMotionProps => {
return {
name,
appear: true,
css: true,
onBeforeEnter: node => {
className.value = name;
style.value = getCollapsedHeight(node);
},
onEnter: node => {
nextTick(() => {
style.value = getRealHeight(node);
});
},
onAfterEnter: () => {
className.value = '';
style.value = {};
},
onBeforeLeave: node => {
className.value = name;
style.value = getCurrentHeight(node);
},
onLeave: node => {
setTimeout(() => {
style.value = getCollapsedHeight(node);
});
},
onAfterLeave: () => {
className.value = '';
style.value = {};
},
};
};
const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => {
if (transitionName !== undefined) {
return transitionName;
}
return `${rootPrefixCls}-${motion}`;
};
export { Transition, TransitionGroup, collapseMotion, getTransitionName, getTransitionDirection };
export default Transition;