191 lines
4.4 KiB
JavaScript
191 lines
4.4 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.zoomUpOut = exports.zoomUpIn = exports.zoomRightOut = exports.zoomRightIn = exports.zoomOut = exports.zoomLeftOut = exports.zoomLeftIn = exports.zoomIn = exports.zoomDownOut = exports.zoomDownIn = exports.zoomBigOut = exports.zoomBigIn = exports.initZoomMotion = void 0;
|
|
var _cssinjs = require("@ant-design/cssinjs");
|
|
var _motion = require("./motion");
|
|
const zoomIn = exports.zoomIn = new _cssinjs.Keyframes('antZoomIn', {
|
|
'0%': {
|
|
transform: 'scale(0.2)',
|
|
opacity: 0
|
|
},
|
|
'100%': {
|
|
transform: 'scale(1)',
|
|
opacity: 1
|
|
}
|
|
});
|
|
const zoomOut = exports.zoomOut = new _cssinjs.Keyframes('antZoomOut', {
|
|
'0%': {
|
|
transform: 'scale(1)'
|
|
},
|
|
'100%': {
|
|
transform: 'scale(0.2)',
|
|
opacity: 0
|
|
}
|
|
});
|
|
const zoomBigIn = exports.zoomBigIn = new _cssinjs.Keyframes('antZoomBigIn', {
|
|
'0%': {
|
|
transform: 'scale(0.8)',
|
|
opacity: 0
|
|
},
|
|
'100%': {
|
|
transform: 'scale(1)',
|
|
opacity: 1
|
|
}
|
|
});
|
|
const zoomBigOut = exports.zoomBigOut = new _cssinjs.Keyframes('antZoomBigOut', {
|
|
'0%': {
|
|
transform: 'scale(1)'
|
|
},
|
|
'100%': {
|
|
transform: 'scale(0.8)',
|
|
opacity: 0
|
|
}
|
|
});
|
|
const zoomUpIn = exports.zoomUpIn = new _cssinjs.Keyframes('antZoomUpIn', {
|
|
'0%': {
|
|
transform: 'scale(0.8)',
|
|
transformOrigin: '50% 0%',
|
|
opacity: 0
|
|
},
|
|
'100%': {
|
|
transform: 'scale(1)',
|
|
transformOrigin: '50% 0%'
|
|
}
|
|
});
|
|
const zoomUpOut = exports.zoomUpOut = new _cssinjs.Keyframes('antZoomUpOut', {
|
|
'0%': {
|
|
transform: 'scale(1)',
|
|
transformOrigin: '50% 0%'
|
|
},
|
|
'100%': {
|
|
transform: 'scale(0.8)',
|
|
transformOrigin: '50% 0%',
|
|
opacity: 0
|
|
}
|
|
});
|
|
const zoomLeftIn = exports.zoomLeftIn = new _cssinjs.Keyframes('antZoomLeftIn', {
|
|
'0%': {
|
|
transform: 'scale(0.8)',
|
|
transformOrigin: '0% 50%',
|
|
opacity: 0
|
|
},
|
|
'100%': {
|
|
transform: 'scale(1)',
|
|
transformOrigin: '0% 50%'
|
|
}
|
|
});
|
|
const zoomLeftOut = exports.zoomLeftOut = new _cssinjs.Keyframes('antZoomLeftOut', {
|
|
'0%': {
|
|
transform: 'scale(1)',
|
|
transformOrigin: '0% 50%'
|
|
},
|
|
'100%': {
|
|
transform: 'scale(0.8)',
|
|
transformOrigin: '0% 50%',
|
|
opacity: 0
|
|
}
|
|
});
|
|
const zoomRightIn = exports.zoomRightIn = new _cssinjs.Keyframes('antZoomRightIn', {
|
|
'0%': {
|
|
transform: 'scale(0.8)',
|
|
transformOrigin: '100% 50%',
|
|
opacity: 0
|
|
},
|
|
'100%': {
|
|
transform: 'scale(1)',
|
|
transformOrigin: '100% 50%'
|
|
}
|
|
});
|
|
const zoomRightOut = exports.zoomRightOut = new _cssinjs.Keyframes('antZoomRightOut', {
|
|
'0%': {
|
|
transform: 'scale(1)',
|
|
transformOrigin: '100% 50%'
|
|
},
|
|
'100%': {
|
|
transform: 'scale(0.8)',
|
|
transformOrigin: '100% 50%',
|
|
opacity: 0
|
|
}
|
|
});
|
|
const zoomDownIn = exports.zoomDownIn = new _cssinjs.Keyframes('antZoomDownIn', {
|
|
'0%': {
|
|
transform: 'scale(0.8)',
|
|
transformOrigin: '50% 100%',
|
|
opacity: 0
|
|
},
|
|
'100%': {
|
|
transform: 'scale(1)',
|
|
transformOrigin: '50% 100%'
|
|
}
|
|
});
|
|
const zoomDownOut = exports.zoomDownOut = new _cssinjs.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
|
|
}
|
|
};
|
|
const initZoomMotion = (token, motionName) => {
|
|
const {
|
|
antCls
|
|
} = token;
|
|
const motionCls = `${antCls}-${motionName}`;
|
|
const {
|
|
inKeyframes,
|
|
outKeyframes
|
|
} = zoomMotion[motionName];
|
|
return [(0, _motion.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
|
|
}
|
|
}];
|
|
};
|
|
exports.initZoomMotion = initZoomMotion; |