You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.1 KiB
50 lines
1.1 KiB
1 year ago
|
import type { CSSInterpolation } from '../../_util/cssinjs';
|
||
|
|
import { Keyframes } from '../../_util/cssinjs';
|
||
|
|
import type { AliasToken } from '../../theme/internal';
|
||
|
|
import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook';
|
||
|
|
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,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
export const initFadeMotion = (
|
||
|
|
token: TokenWithCommonCls<AliasToken>,
|
||
|
|
sameLevel = false,
|
||
|
|
): CSSInterpolation => {
|
||
|
|
const { antCls } = token;
|
||
|
|
const motionCls = `${antCls}-fade`;
|
||
|
|
const sameLevelPrefix = sameLevel ? '&' : '';
|
||
|
|
|
||
|
|
return [
|
||
|
|
initMotion(motionCls, fadeIn, fadeOut, token.motionDurationMid, sameLevel),
|
||
|
|
{
|
||
|
|
[`
|
||
|
|
${sameLevelPrefix}${motionCls}-enter,
|
||
|
|
${sameLevelPrefix}${motionCls}-appear
|
||
|
|
`]: {
|
||
|
|
opacity: 0,
|
||
|
|
animationTimingFunction: 'linear',
|
||
|
|
},
|
||
|
|
|
||
|
|
[`${sameLevelPrefix}${motionCls}-leave`]: {
|
||
|
|
animationTimingFunction: 'linear',
|
||
|
|
},
|
||
|
|
},
|
||
|
|
];
|
||
|
|
};
|