2022-05-09 22:20:07 +08:00
|
|
|
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
|
|
|
import { Keyframes } from '@ant-design/cssinjs';
|
2022-11-23 20:22:38 +08:00
|
|
|
import type { AliasToken } from '../../theme/internal';
|
2022-06-27 14:25:59 +08:00
|
|
|
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
|
2022-03-08 10:29:00 +08:00
|
|
|
import { initMotion } from './motion';
|
|
|
|
|
|
|
|
export const slideUpIn = new Keyframes('antSlideUpIn', {
|
|
|
|
'0%': {
|
|
|
|
transform: 'scaleY(0.8)',
|
|
|
|
transformOrigin: '0% 0%',
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
'100%': {
|
|
|
|
transform: 'scaleY(1)',
|
|
|
|
transformOrigin: '0% 0%',
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
export const slideUpOut = new Keyframes('antSlideUpOut', {
|
|
|
|
'0%': {
|
|
|
|
transform: 'scaleY(1)',
|
|
|
|
transformOrigin: '0% 0%',
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
|
|
|
|
'100%': {
|
|
|
|
transform: 'scaleY(0.8)',
|
|
|
|
transformOrigin: '0% 0%',
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
export const slideDownIn = new Keyframes('antSlideDownIn', {
|
|
|
|
'0%': {
|
|
|
|
transform: 'scaleY(0.8)',
|
|
|
|
transformOrigin: '100% 100%',
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
'100%': {
|
|
|
|
transform: 'scaleY(1)',
|
|
|
|
transformOrigin: '100% 100%',
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
export const slideDownOut = new Keyframes('antSlideDownOut', {
|
|
|
|
'0%': {
|
|
|
|
transform: 'scaleY(1)',
|
|
|
|
transformOrigin: '100% 100%',
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
|
|
|
|
'100%': {
|
|
|
|
transform: 'scaleY(0.8)',
|
|
|
|
transformOrigin: '100% 100%',
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
export const slideLeftIn = new Keyframes('antSlideLeftIn', {
|
|
|
|
'0%': {
|
|
|
|
transform: 'scaleX(0.8)',
|
|
|
|
transformOrigin: '0% 0%',
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
'100%': {
|
|
|
|
transform: 'scaleX(1)',
|
|
|
|
transformOrigin: '0% 0%',
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
export const slideLeftOut = new Keyframes('antSlideLeftOut', {
|
|
|
|
'0%': {
|
|
|
|
transform: 'scaleX(1)',
|
|
|
|
transformOrigin: '0% 0%',
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
|
|
|
|
'100%': {
|
|
|
|
transform: 'scaleX(0.8)',
|
|
|
|
transformOrigin: '0% 0%',
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
export const slideRightIn = new Keyframes('antSlideRightIn', {
|
|
|
|
'0%': {
|
|
|
|
transform: 'scaleX(0.8)',
|
|
|
|
transformOrigin: '100% 0%',
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
|
|
|
|
'100%': {
|
|
|
|
transform: 'scaleX(1)',
|
|
|
|
transformOrigin: '100% 0%',
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
export const slideRightOut = new Keyframes('antSlideRightOut', {
|
|
|
|
'0%': {
|
|
|
|
transform: 'scaleX(1)',
|
|
|
|
transformOrigin: '100% 0%',
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
|
|
|
|
'100%': {
|
|
|
|
transform: 'scaleX(0.8)',
|
|
|
|
transformOrigin: '100% 0%',
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
});
|
2022-06-21 00:34:51 +08:00
|
|
|
|
|
|
|
type SlideMotionTypes = 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
|
|
|
|
const slideMotion: Record<SlideMotionTypes, { inKeyframes: Keyframes; outKeyframes: Keyframes }> = {
|
|
|
|
'slide-up': {
|
|
|
|
inKeyframes: slideUpIn,
|
|
|
|
outKeyframes: slideUpOut,
|
|
|
|
},
|
|
|
|
'slide-down': {
|
|
|
|
inKeyframes: slideDownIn,
|
|
|
|
outKeyframes: slideDownOut,
|
|
|
|
},
|
|
|
|
'slide-left': {
|
|
|
|
inKeyframes: slideLeftIn,
|
|
|
|
outKeyframes: slideLeftOut,
|
|
|
|
},
|
|
|
|
'slide-right': {
|
|
|
|
inKeyframes: slideRightIn,
|
|
|
|
outKeyframes: slideRightOut,
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
export const initSlideMotion = (
|
|
|
|
token: TokenWithCommonCls<AliasToken>,
|
|
|
|
motionName: SlideMotionTypes,
|
|
|
|
): CSSInterpolation => {
|
|
|
|
const { antCls } = token;
|
|
|
|
const motionCls = `${antCls}-${motionName}`;
|
|
|
|
const { inKeyframes, outKeyframes } = slideMotion[motionName];
|
|
|
|
|
|
|
|
return [
|
|
|
|
initMotion(motionCls, inKeyframes, outKeyframes, token.motionDurationMid),
|
|
|
|
|
|
|
|
{
|
|
|
|
[`
|
|
|
|
${motionCls}-enter,
|
|
|
|
${motionCls}-appear
|
|
|
|
`]: {
|
2023-01-13 10:42:59 +08:00
|
|
|
transform: 'scale(0)',
|
|
|
|
transformOrigin: '0% 0%',
|
2022-06-21 00:34:51 +08:00
|
|
|
opacity: 0,
|
|
|
|
animationTimingFunction: token.motionEaseOutQuint,
|
2023-03-02 22:09:02 +08:00
|
|
|
|
|
|
|
[`&-prepare`]: {
|
|
|
|
transform: 'scale(1)',
|
|
|
|
},
|
2022-06-21 00:34:51 +08:00
|
|
|
},
|
|
|
|
|
|
|
|
[`${motionCls}-leave`]: {
|
|
|
|
animationTimingFunction: token.motionEaseInQuint,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
};
|