@ant-design/x
Version:
Craft AI-driven interfaces effortlessly
67 lines • 1.83 kB
JavaScript
import { Keyframes } from '@ant-design/cssinjs';
import { FastColor } from '@ant-design/fast-color';
import { initMotion } from "./init";
export const fadeInLeft = new Keyframes('antXFadeInLeft', {
'0%': {
maskPosition: '100% 0'
},
'100%': {
maskPosition: '0% 0%'
}
});
export const fadeIn = new Keyframes('antXFadeIn', {
'0%': {
opacity: 0
},
'100%': {
opacity: 1
}
});
export const fadeOut = new Keyframes('antFadeOut', {
'0%': {
opacity: 1
},
'100%': {
opacity: 0
}
});
export const initFadeLeftMotion = (token, sameLevel = false) => {
const {
antCls
} = token;
const motionCls = `${antCls}-x-fade-left`;
const sameLevelPrefix = sameLevel ? '&' : '';
return [{
[token.componentCls]: {
...initMotion(motionCls, fadeInLeft, fadeOut, '1s', sameLevel),
[`${sameLevelPrefix}${motionCls}-enter,${sameLevelPrefix}${motionCls}-appear`]: {
transitionProperty: 'mask-position',
animationTimingFunction: 'linear',
maskImage: `linear-gradient(90deg, ${token.colorTextBase} 33%, ${new FastColor(token.colorTextBase).setA(0)} 66%)`,
maskSize: '300% 100%',
maskPosition: '100% 0%'
},
[`${sameLevelPrefix}${motionCls}-leave`]: {
animationTimingFunction: 'linear'
}
}
}];
};
export const initFadeMotion = (token, sameLevel = false) => {
const {
antCls
} = token;
const motionCls = `${antCls}-x-fade`;
const sameLevelPrefix = sameLevel ? '&' : '';
return [{
[token.componentCls]: {
...initMotion(motionCls, fadeIn, fadeOut, '1.2s', sameLevel),
[`${sameLevelPrefix}${motionCls}-enter,${sameLevelPrefix}${motionCls}-appear`]: {
opacity: 0
},
[`${sameLevelPrefix}${motionCls}-leave`]: {
animationTimingFunction: 'linear'
}
}
}];
};