ant-design/components/upload/style/motion.tsx
afc163 08d1a71ff4
refactor: Move Upload from less to css in js (#34528)
* refactor: Upload to CSS-in-JS

* chore: clean up outdated code

* chore: add FIXME

* revert useless change of UploadList

* fix: upload animation
2022-04-25 18:46:53 +08:00

51 lines
1.2 KiB
TypeScript

import { Keyframes } from '@ant-design/cssinjs';
import type { GenerateStyle, FullToken } from '../../_util/theme';
const uploadAnimateInlineIn = new Keyframes('uploadAnimateInlineIn', {
from: {
width: 0,
height: 0,
margin: 0,
padding: 0,
opacity: 0,
},
});
const uploadAnimateInlineOut = new Keyframes('uploadAnimateInlineOut', {
to: {
width: 0,
height: 0,
margin: 0,
padding: 0,
opacity: 0,
},
});
// =========================== Motion ===========================
const genMotionStyle: GenerateStyle<FullToken<'Upload'>> = token => {
const { componentCls } = token;
const inlineCls = `${componentCls}-animate-inline`;
return [
{
[`${componentCls}-wrapper`]: {
[`${inlineCls}-appear, ${inlineCls}-enter, ${inlineCls}-leave`]: {
animationDuration: token.motionDurationSlow,
animationFillMode: token.motionEaseInOutCirc,
},
[`${inlineCls}-appear, ${inlineCls}-enter`]: {
animationName: uploadAnimateInlineIn,
},
[`${inlineCls}-leave`]: {
animationName: uploadAnimateInlineOut,
},
},
},
uploadAnimateInlineIn,
uploadAnimateInlineOut,
];
};
export default genMotionStyle;