145 lines
3.5 KiB
JavaScript
145 lines
3.5 KiB
JavaScript
"use strict";
|
|
|
|
Object.defineProperty(exports, "__esModule", {
|
|
value: true
|
|
});
|
|
exports.moveUpOut = exports.moveUpIn = exports.moveRightOut = exports.moveRightIn = exports.moveLeftOut = exports.moveLeftIn = exports.moveDownOut = exports.moveDownIn = exports.initMoveMotion = void 0;
|
|
var _cssinjs = require("@ant-design/cssinjs");
|
|
var _motion = require("./motion");
|
|
const moveDownIn = exports.moveDownIn = new _cssinjs.Keyframes('antMoveDownIn', {
|
|
'0%': {
|
|
transform: 'translate3d(0, 100%, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 0
|
|
},
|
|
'100%': {
|
|
transform: 'translate3d(0, 0, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 1
|
|
}
|
|
});
|
|
const moveDownOut = exports.moveDownOut = new _cssinjs.Keyframes('antMoveDownOut', {
|
|
'0%': {
|
|
transform: 'translate3d(0, 0, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 1
|
|
},
|
|
'100%': {
|
|
transform: 'translate3d(0, 100%, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 0
|
|
}
|
|
});
|
|
const moveLeftIn = exports.moveLeftIn = new _cssinjs.Keyframes('antMoveLeftIn', {
|
|
'0%': {
|
|
transform: 'translate3d(-100%, 0, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 0
|
|
},
|
|
'100%': {
|
|
transform: 'translate3d(0, 0, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 1
|
|
}
|
|
});
|
|
const moveLeftOut = exports.moveLeftOut = new _cssinjs.Keyframes('antMoveLeftOut', {
|
|
'0%': {
|
|
transform: 'translate3d(0, 0, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 1
|
|
},
|
|
'100%': {
|
|
transform: 'translate3d(-100%, 0, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 0
|
|
}
|
|
});
|
|
const moveRightIn = exports.moveRightIn = new _cssinjs.Keyframes('antMoveRightIn', {
|
|
'0%': {
|
|
transform: 'translate3d(100%, 0, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 0
|
|
},
|
|
'100%': {
|
|
transform: 'translate3d(0, 0, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 1
|
|
}
|
|
});
|
|
const moveRightOut = exports.moveRightOut = new _cssinjs.Keyframes('antMoveRightOut', {
|
|
'0%': {
|
|
transform: 'translate3d(0, 0, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 1
|
|
},
|
|
'100%': {
|
|
transform: 'translate3d(100%, 0, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 0
|
|
}
|
|
});
|
|
const moveUpIn = exports.moveUpIn = new _cssinjs.Keyframes('antMoveUpIn', {
|
|
'0%': {
|
|
transform: 'translate3d(0, -100%, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 0
|
|
},
|
|
'100%': {
|
|
transform: 'translate3d(0, 0, 0)',
|
|
transformOrigin: '0 0',
|
|
opacity: 1
|
|
}
|
|
});
|
|
const moveUpOut = exports.moveUpOut = new _cssinjs.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
|
|
}
|
|
};
|
|
const initMoveMotion = (token, motionName) => {
|
|
const {
|
|
antCls
|
|
} = token;
|
|
const motionCls = `${antCls}-${motionName}`;
|
|
const {
|
|
inKeyframes,
|
|
outKeyframes
|
|
} = moveMotion[motionName];
|
|
return [(0, _motion.initMotion)(motionCls, inKeyframes, outKeyframes, token.motionDurationMid), {
|
|
[`
|
|
${motionCls}-enter,
|
|
${motionCls}-appear
|
|
`]: {
|
|
opacity: 0,
|
|
animationTimingFunction: token.motionEaseOutCirc
|
|
},
|
|
[`${motionCls}-leave`]: {
|
|
animationTimingFunction: token.motionEaseInOutCirc
|
|
}
|
|
}];
|
|
};
|
|
exports.initMoveMotion = initMoveMotion; |