2022-06-21 00:34:51 +08:00
|
|
|
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
|
|
|
import { Keyframes } from '@ant-design/cssinjs';
|
2022-06-27 14:25:59 +08:00
|
|
|
import type { AliasToken } from '../../theme';
|
|
|
|
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
|
2022-06-21 00:34:51 +08:00
|
|
|
import { initMotion } from './motion';
|
|
|
|
|
|
|
|
export const fadeIn = new Keyframes('antFadeIn', {
|
|
|
|
'0%': {
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
'100%': {
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
export const fadeOut = new Keyframes('antFadeOut', {
|
|
|
|
'0%': {
|
|
|
|
opacity: 1,
|
|
|
|
},
|
|
|
|
'100%': {
|
|
|
|
opacity: 0,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
2022-11-10 21:27:37 +08:00
|
|
|
export const initFadeMotion = (
|
|
|
|
token: TokenWithCommonCls<AliasToken>,
|
|
|
|
sameLevel = false,
|
|
|
|
): CSSInterpolation => {
|
2022-06-21 00:34:51 +08:00
|
|
|
const { antCls } = token;
|
|
|
|
const motionCls = `${antCls}-fade`;
|
2022-11-10 21:27:37 +08:00
|
|
|
const sameLevelPrefix = sameLevel ? '&' : '';
|
2022-06-21 00:34:51 +08:00
|
|
|
|
|
|
|
return [
|
2022-11-10 21:27:37 +08:00
|
|
|
initMotion(motionCls, fadeIn, fadeOut, token.motionDurationMid, sameLevel),
|
2022-06-21 00:34:51 +08:00
|
|
|
{
|
|
|
|
[`
|
2022-11-10 21:27:37 +08:00
|
|
|
${sameLevelPrefix}${motionCls}-enter,
|
|
|
|
${sameLevelPrefix}${motionCls}-appear
|
2022-06-21 00:34:51 +08:00
|
|
|
`]: {
|
|
|
|
opacity: 0,
|
|
|
|
animationTimingFunction: 'linear',
|
|
|
|
},
|
|
|
|
|
2022-11-10 21:27:37 +08:00
|
|
|
[`${sameLevelPrefix}${motionCls}-leave`]: {
|
2022-06-21 00:34:51 +08:00
|
|
|
animationTimingFunction: 'linear',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
];
|
|
|
|
};
|