first commit
This commit is contained in:
3
frontend/node_modules/antd/es/style/motion/collapse.d.ts
generated
vendored
Normal file
3
frontend/node_modules/antd/es/style/motion/collapse.d.ts
generated
vendored
Normal file
@@ -0,0 +1,3 @@
|
||||
import type { AliasToken, GenerateStyle, TokenWithCommonCls } from '../../theme/internal';
|
||||
declare const genCollapseMotion: GenerateStyle<TokenWithCommonCls<AliasToken>>;
|
||||
export default genCollapseMotion;
|
||||
18
frontend/node_modules/antd/es/style/motion/collapse.js
generated
vendored
Normal file
18
frontend/node_modules/antd/es/style/motion/collapse.js
generated
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
const genCollapseMotion = token => ({
|
||||
[token.componentCls]: {
|
||||
// For common/openAnimation
|
||||
[`${token.antCls}-motion-collapse-legacy`]: {
|
||||
overflow: 'hidden',
|
||||
'&-active': {
|
||||
transition: `height ${token.motionDurationMid} ${token.motionEaseInOut},
|
||||
opacity ${token.motionDurationMid} ${token.motionEaseInOut} !important`
|
||||
}
|
||||
},
|
||||
[`${token.antCls}-motion-collapse`]: {
|
||||
overflow: 'hidden',
|
||||
transition: `height ${token.motionDurationMid} ${token.motionEaseInOut},
|
||||
opacity ${token.motionDurationMid} ${token.motionEaseInOut} !important`
|
||||
}
|
||||
}
|
||||
});
|
||||
export default genCollapseMotion;
|
||||
6
frontend/node_modules/antd/es/style/motion/fade.d.ts
generated
vendored
Normal file
6
frontend/node_modules/antd/es/style/motion/fade.d.ts
generated
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import type { AliasToken, TokenWithCommonCls } from '../../theme/internal';
|
||||
export declare const fadeIn: Keyframes;
|
||||
export declare const fadeOut: Keyframes;
|
||||
export declare const initFadeMotion: (token: TokenWithCommonCls<AliasToken>, sameLevel?: boolean) => CSSInterpolation;
|
||||
37
frontend/node_modules/antd/es/style/motion/fade.js
generated
vendored
Normal file
37
frontend/node_modules/antd/es/style/motion/fade.js
generated
vendored
Normal file
@@ -0,0 +1,37 @@
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
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, sameLevel = false) => {
|
||||
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'
|
||||
}
|
||||
}];
|
||||
};
|
||||
6
frontend/node_modules/antd/es/style/motion/index.d.ts
generated
vendored
Normal file
6
frontend/node_modules/antd/es/style/motion/index.d.ts
generated
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
import genCollapseMotion from './collapse';
|
||||
import { fadeIn, fadeOut, initFadeMotion } from './fade';
|
||||
import { initMoveMotion, moveDownIn, moveDownOut, moveLeftIn, moveLeftOut, moveRightIn, moveRightOut, moveUpIn, moveUpOut } from './move';
|
||||
import { initSlideMotion, slideDownIn, slideDownOut, slideLeftIn, slideLeftOut, slideRightIn, slideRightOut, slideUpIn, slideUpOut } from './slide';
|
||||
import { initZoomMotion, zoomBigIn, zoomBigOut, zoomDownIn, zoomDownOut, zoomIn, zoomLeftIn, zoomLeftOut, zoomOut, zoomRightIn, zoomRightOut, zoomUpIn, zoomUpOut } from './zoom';
|
||||
export { initSlideMotion, slideUpIn, slideUpOut, slideDownIn, slideDownOut, slideLeftIn, slideLeftOut, slideRightIn, slideRightOut, zoomOut, zoomIn, zoomBigIn, zoomLeftOut, zoomBigOut, zoomLeftIn, zoomRightIn, zoomUpIn, zoomRightOut, zoomUpOut, zoomDownIn, zoomDownOut, initZoomMotion, fadeIn, fadeOut, initFadeMotion, moveRightOut, moveRightIn, moveLeftOut, moveLeftIn, moveDownOut, moveDownIn, moveUpIn, moveUpOut, initMoveMotion, genCollapseMotion, };
|
||||
6
frontend/node_modules/antd/es/style/motion/index.js
generated
vendored
Normal file
6
frontend/node_modules/antd/es/style/motion/index.js
generated
vendored
Normal file
@@ -0,0 +1,6 @@
|
||||
import genCollapseMotion from './collapse';
|
||||
import { fadeIn, fadeOut, initFadeMotion } from './fade';
|
||||
import { initMoveMotion, moveDownIn, moveDownOut, moveLeftIn, moveLeftOut, moveRightIn, moveRightOut, moveUpIn, moveUpOut } from './move';
|
||||
import { initSlideMotion, slideDownIn, slideDownOut, slideLeftIn, slideLeftOut, slideRightIn, slideRightOut, slideUpIn, slideUpOut } from './slide';
|
||||
import { initZoomMotion, zoomBigIn, zoomBigOut, zoomDownIn, zoomDownOut, zoomIn, zoomLeftIn, zoomLeftOut, zoomOut, zoomRightIn, zoomRightOut, zoomUpIn, zoomUpOut } from './zoom';
|
||||
export { initSlideMotion, slideUpIn, slideUpOut, slideDownIn, slideDownOut, slideLeftIn, slideLeftOut, slideRightIn, slideRightOut, zoomOut, zoomIn, zoomBigIn, zoomLeftOut, zoomBigOut, zoomLeftIn, zoomRightIn, zoomUpIn, zoomRightOut, zoomUpOut, zoomDownIn, zoomDownOut, initZoomMotion, fadeIn, fadeOut, initFadeMotion, moveRightOut, moveRightIn, moveLeftOut, moveLeftIn, moveDownOut, moveDownIn, moveUpIn, moveUpOut, initMoveMotion, genCollapseMotion };
|
||||
2
frontend/node_modules/antd/es/style/motion/motion.d.ts
generated
vendored
Normal file
2
frontend/node_modules/antd/es/style/motion/motion.d.ts
generated
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
import type { CSSObject, Keyframes } from '@ant-design/cssinjs';
|
||||
export declare const initMotion: (motionCls: string, inKeyframes: Keyframes, outKeyframes: Keyframes, duration: string, sameLevel?: boolean) => CSSObject;
|
||||
35
frontend/node_modules/antd/es/style/motion/motion.js
generated
vendored
Normal file
35
frontend/node_modules/antd/es/style/motion/motion.js
generated
vendored
Normal file
@@ -0,0 +1,35 @@
|
||||
const initMotionCommon = duration => ({
|
||||
animationDuration: duration,
|
||||
animationFillMode: 'both'
|
||||
});
|
||||
// FIXME: origin less code seems same as initMotionCommon. Maybe we can safe remove
|
||||
const initMotionCommonLeave = duration => ({
|
||||
animationDuration: duration,
|
||||
animationFillMode: 'both'
|
||||
});
|
||||
export const initMotion = (motionCls, inKeyframes, outKeyframes, duration, sameLevel = false) => {
|
||||
const sameLevelPrefix = sameLevel ? '&' : '';
|
||||
return {
|
||||
[`
|
||||
${sameLevelPrefix}${motionCls}-enter,
|
||||
${sameLevelPrefix}${motionCls}-appear
|
||||
`]: Object.assign(Object.assign({}, initMotionCommon(duration)), {
|
||||
animationPlayState: 'paused'
|
||||
}),
|
||||
[`${sameLevelPrefix}${motionCls}-leave`]: Object.assign(Object.assign({}, initMotionCommonLeave(duration)), {
|
||||
animationPlayState: 'paused'
|
||||
}),
|
||||
[`
|
||||
${sameLevelPrefix}${motionCls}-enter${motionCls}-enter-active,
|
||||
${sameLevelPrefix}${motionCls}-appear${motionCls}-appear-active
|
||||
`]: {
|
||||
animationName: inKeyframes,
|
||||
animationPlayState: 'running'
|
||||
},
|
||||
[`${sameLevelPrefix}${motionCls}-leave${motionCls}-leave-active`]: {
|
||||
animationName: outKeyframes,
|
||||
animationPlayState: 'running',
|
||||
pointerEvents: 'none'
|
||||
}
|
||||
};
|
||||
};
|
||||
14
frontend/node_modules/antd/es/style/motion/move.d.ts
generated
vendored
Normal file
14
frontend/node_modules/antd/es/style/motion/move.d.ts
generated
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import type { AliasToken, TokenWithCommonCls } from '../../theme/internal';
|
||||
export declare const moveDownIn: Keyframes;
|
||||
export declare const moveDownOut: Keyframes;
|
||||
export declare const moveLeftIn: Keyframes;
|
||||
export declare const moveLeftOut: Keyframes;
|
||||
export declare const moveRightIn: Keyframes;
|
||||
export declare const moveRightOut: Keyframes;
|
||||
export declare const moveUpIn: Keyframes;
|
||||
export declare const moveUpOut: Keyframes;
|
||||
type MoveMotionTypes = 'move-up' | 'move-down' | 'move-left' | 'move-right';
|
||||
export declare const initMoveMotion: (token: TokenWithCommonCls<AliasToken>, motionName: MoveMotionTypes) => CSSInterpolation;
|
||||
export {};
|
||||
138
frontend/node_modules/antd/es/style/motion/move.js
generated
vendored
Normal file
138
frontend/node_modules/antd/es/style/motion/move.js
generated
vendored
Normal file
@@ -0,0 +1,138 @@
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import { initMotion } from './motion';
|
||||
export const moveDownIn = new Keyframes('antMoveDownIn', {
|
||||
'0%': {
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
}
|
||||
});
|
||||
export const moveDownOut = new Keyframes('antMoveDownOut', {
|
||||
'0%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate3d(0, 100%, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
export const moveLeftIn = new Keyframes('antMoveLeftIn', {
|
||||
'0%': {
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
}
|
||||
});
|
||||
export const moveLeftOut = new Keyframes('antMoveLeftOut', {
|
||||
'0%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate3d(-100%, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
export const moveRightIn = new Keyframes('antMoveRightIn', {
|
||||
'0%': {
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
}
|
||||
});
|
||||
export const moveRightOut = new Keyframes('antMoveRightOut', {
|
||||
'0%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate3d(100%, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
export const moveUpIn = new Keyframes('antMoveUpIn', {
|
||||
'0%': {
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
}
|
||||
});
|
||||
export const moveUpOut = new Keyframes('antMoveUpOut', {
|
||||
'0%': {
|
||||
transform: 'translate3d(0, 0, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 1
|
||||
},
|
||||
'100%': {
|
||||
transform: 'translate3d(0, -100%, 0)',
|
||||
transformOrigin: '0 0',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
const moveMotion = {
|
||||
'move-up': {
|
||||
inKeyframes: moveUpIn,
|
||||
outKeyframes: moveUpOut
|
||||
},
|
||||
'move-down': {
|
||||
inKeyframes: moveDownIn,
|
||||
outKeyframes: moveDownOut
|
||||
},
|
||||
'move-left': {
|
||||
inKeyframes: moveLeftIn,
|
||||
outKeyframes: moveLeftOut
|
||||
},
|
||||
'move-right': {
|
||||
inKeyframes: moveRightIn,
|
||||
outKeyframes: moveRightOut
|
||||
}
|
||||
};
|
||||
export const initMoveMotion = (token, motionName) => {
|
||||
const {
|
||||
antCls
|
||||
} = token;
|
||||
const motionCls = `${antCls}-${motionName}`;
|
||||
const {
|
||||
inKeyframes,
|
||||
outKeyframes
|
||||
} = moveMotion[motionName];
|
||||
return [initMotion(motionCls, inKeyframes, outKeyframes, token.motionDurationMid), {
|
||||
[`
|
||||
${motionCls}-enter,
|
||||
${motionCls}-appear
|
||||
`]: {
|
||||
opacity: 0,
|
||||
animationTimingFunction: token.motionEaseOutCirc
|
||||
},
|
||||
[`${motionCls}-leave`]: {
|
||||
animationTimingFunction: token.motionEaseInOutCirc
|
||||
}
|
||||
}];
|
||||
};
|
||||
14
frontend/node_modules/antd/es/style/motion/slide.d.ts
generated
vendored
Normal file
14
frontend/node_modules/antd/es/style/motion/slide.d.ts
generated
vendored
Normal file
@@ -0,0 +1,14 @@
|
||||
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import type { AliasToken, TokenWithCommonCls } from '../../theme/internal';
|
||||
export declare const slideUpIn: Keyframes;
|
||||
export declare const slideUpOut: Keyframes;
|
||||
export declare const slideDownIn: Keyframes;
|
||||
export declare const slideDownOut: Keyframes;
|
||||
export declare const slideLeftIn: Keyframes;
|
||||
export declare const slideLeftOut: Keyframes;
|
||||
export declare const slideRightIn: Keyframes;
|
||||
export declare const slideRightOut: Keyframes;
|
||||
type SlideMotionTypes = 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
|
||||
export declare const initSlideMotion: (token: TokenWithCommonCls<AliasToken>, motionName: SlideMotionTypes) => CSSInterpolation;
|
||||
export {};
|
||||
143
frontend/node_modules/antd/es/style/motion/slide.js
generated
vendored
Normal file
143
frontend/node_modules/antd/es/style/motion/slide.js
generated
vendored
Normal file
@@ -0,0 +1,143 @@
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
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
|
||||
}
|
||||
});
|
||||
const slideMotion = {
|
||||
'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, motionName) => {
|
||||
const {
|
||||
antCls
|
||||
} = token;
|
||||
const motionCls = `${antCls}-${motionName}`;
|
||||
const {
|
||||
inKeyframes,
|
||||
outKeyframes
|
||||
} = slideMotion[motionName];
|
||||
return [initMotion(motionCls, inKeyframes, outKeyframes, token.motionDurationMid), {
|
||||
[`
|
||||
${motionCls}-enter,
|
||||
${motionCls}-appear
|
||||
`]: {
|
||||
transform: 'scale(0)',
|
||||
transformOrigin: '0% 0%',
|
||||
opacity: 0,
|
||||
animationTimingFunction: token.motionEaseOutQuint,
|
||||
'&-prepare': {
|
||||
transform: 'scale(1)'
|
||||
}
|
||||
},
|
||||
[`${motionCls}-leave`]: {
|
||||
animationTimingFunction: token.motionEaseInQuint
|
||||
}
|
||||
}];
|
||||
};
|
||||
18
frontend/node_modules/antd/es/style/motion/zoom.d.ts
generated
vendored
Normal file
18
frontend/node_modules/antd/es/style/motion/zoom.d.ts
generated
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
import type { CSSInterpolation } from '@ant-design/cssinjs';
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import type { AliasToken, TokenWithCommonCls } from '../../theme/internal';
|
||||
export declare const zoomIn: Keyframes;
|
||||
export declare const zoomOut: Keyframes;
|
||||
export declare const zoomBigIn: Keyframes;
|
||||
export declare const zoomBigOut: Keyframes;
|
||||
export declare const zoomUpIn: Keyframes;
|
||||
export declare const zoomUpOut: Keyframes;
|
||||
export declare const zoomLeftIn: Keyframes;
|
||||
export declare const zoomLeftOut: Keyframes;
|
||||
export declare const zoomRightIn: Keyframes;
|
||||
export declare const zoomRightOut: Keyframes;
|
||||
export declare const zoomDownIn: Keyframes;
|
||||
export declare const zoomDownOut: Keyframes;
|
||||
type ZoomMotionTypes = 'zoom' | 'zoom-big' | 'zoom-big-fast' | 'zoom-left' | 'zoom-right' | 'zoom-up' | 'zoom-down';
|
||||
export declare const initZoomMotion: (token: TokenWithCommonCls<AliasToken>, motionName: ZoomMotionTypes) => CSSInterpolation;
|
||||
export {};
|
||||
184
frontend/node_modules/antd/es/style/motion/zoom.js
generated
vendored
Normal file
184
frontend/node_modules/antd/es/style/motion/zoom.js
generated
vendored
Normal file
@@ -0,0 +1,184 @@
|
||||
import { Keyframes } from '@ant-design/cssinjs';
|
||||
import { initMotion } from './motion';
|
||||
export const zoomIn = new Keyframes('antZoomIn', {
|
||||
'0%': {
|
||||
transform: 'scale(0.2)',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(1)',
|
||||
opacity: 1
|
||||
}
|
||||
});
|
||||
export const zoomOut = new Keyframes('antZoomOut', {
|
||||
'0%': {
|
||||
transform: 'scale(1)'
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(0.2)',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
export const zoomBigIn = new Keyframes('antZoomBigIn', {
|
||||
'0%': {
|
||||
transform: 'scale(0.8)',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(1)',
|
||||
opacity: 1
|
||||
}
|
||||
});
|
||||
export const zoomBigOut = new Keyframes('antZoomBigOut', {
|
||||
'0%': {
|
||||
transform: 'scale(1)'
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(0.8)',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
export const zoomUpIn = new Keyframes('antZoomUpIn', {
|
||||
'0%': {
|
||||
transform: 'scale(0.8)',
|
||||
transformOrigin: '50% 0%',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(1)',
|
||||
transformOrigin: '50% 0%'
|
||||
}
|
||||
});
|
||||
export const zoomUpOut = new Keyframes('antZoomUpOut', {
|
||||
'0%': {
|
||||
transform: 'scale(1)',
|
||||
transformOrigin: '50% 0%'
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(0.8)',
|
||||
transformOrigin: '50% 0%',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
export const zoomLeftIn = new Keyframes('antZoomLeftIn', {
|
||||
'0%': {
|
||||
transform: 'scale(0.8)',
|
||||
transformOrigin: '0% 50%',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(1)',
|
||||
transformOrigin: '0% 50%'
|
||||
}
|
||||
});
|
||||
export const zoomLeftOut = new Keyframes('antZoomLeftOut', {
|
||||
'0%': {
|
||||
transform: 'scale(1)',
|
||||
transformOrigin: '0% 50%'
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(0.8)',
|
||||
transformOrigin: '0% 50%',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
export const zoomRightIn = new Keyframes('antZoomRightIn', {
|
||||
'0%': {
|
||||
transform: 'scale(0.8)',
|
||||
transformOrigin: '100% 50%',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(1)',
|
||||
transformOrigin: '100% 50%'
|
||||
}
|
||||
});
|
||||
export const zoomRightOut = new Keyframes('antZoomRightOut', {
|
||||
'0%': {
|
||||
transform: 'scale(1)',
|
||||
transformOrigin: '100% 50%'
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(0.8)',
|
||||
transformOrigin: '100% 50%',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
export const zoomDownIn = new Keyframes('antZoomDownIn', {
|
||||
'0%': {
|
||||
transform: 'scale(0.8)',
|
||||
transformOrigin: '50% 100%',
|
||||
opacity: 0
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(1)',
|
||||
transformOrigin: '50% 100%'
|
||||
}
|
||||
});
|
||||
export const zoomDownOut = new Keyframes('antZoomDownOut', {
|
||||
'0%': {
|
||||
transform: 'scale(1)',
|
||||
transformOrigin: '50% 100%'
|
||||
},
|
||||
'100%': {
|
||||
transform: 'scale(0.8)',
|
||||
transformOrigin: '50% 100%',
|
||||
opacity: 0
|
||||
}
|
||||
});
|
||||
const zoomMotion = {
|
||||
zoom: {
|
||||
inKeyframes: zoomIn,
|
||||
outKeyframes: zoomOut
|
||||
},
|
||||
'zoom-big': {
|
||||
inKeyframes: zoomBigIn,
|
||||
outKeyframes: zoomBigOut
|
||||
},
|
||||
'zoom-big-fast': {
|
||||
inKeyframes: zoomBigIn,
|
||||
outKeyframes: zoomBigOut
|
||||
},
|
||||
'zoom-left': {
|
||||
inKeyframes: zoomLeftIn,
|
||||
outKeyframes: zoomLeftOut
|
||||
},
|
||||
'zoom-right': {
|
||||
inKeyframes: zoomRightIn,
|
||||
outKeyframes: zoomRightOut
|
||||
},
|
||||
'zoom-up': {
|
||||
inKeyframes: zoomUpIn,
|
||||
outKeyframes: zoomUpOut
|
||||
},
|
||||
'zoom-down': {
|
||||
inKeyframes: zoomDownIn,
|
||||
outKeyframes: zoomDownOut
|
||||
}
|
||||
};
|
||||
export const initZoomMotion = (token, motionName) => {
|
||||
const {
|
||||
antCls
|
||||
} = token;
|
||||
const motionCls = `${antCls}-${motionName}`;
|
||||
const {
|
||||
inKeyframes,
|
||||
outKeyframes
|
||||
} = zoomMotion[motionName];
|
||||
return [initMotion(motionCls, inKeyframes, outKeyframes, motionName === 'zoom-big-fast' ? token.motionDurationFast : token.motionDurationMid), {
|
||||
[`
|
||||
${motionCls}-enter,
|
||||
${motionCls}-appear
|
||||
`]: {
|
||||
transform: 'scale(0)',
|
||||
opacity: 0,
|
||||
animationTimingFunction: token.motionEaseOutCirc,
|
||||
'&-prepare': {
|
||||
transform: 'none'
|
||||
}
|
||||
},
|
||||
[`${motionCls}-leave`]: {
|
||||
animationTimingFunction: token.motionEaseInOutCirc
|
||||
}
|
||||
}];
|
||||
};
|
||||
Reference in New Issue
Block a user