144 lines
3.0 KiB
JavaScript
144 lines
3.0 KiB
JavaScript
import { a1 as Keyframe, au as initMotion } from './server.mjs';
|
|
|
|
const slideUpIn = new Keyframe("antSlideUpIn", {
|
|
"0%": {
|
|
transform: "scaleY(0.8)",
|
|
transformOrigin: "0% 0%",
|
|
opacity: 0
|
|
},
|
|
"100%": {
|
|
transform: "scaleY(1)",
|
|
transformOrigin: "0% 0%",
|
|
opacity: 1
|
|
}
|
|
});
|
|
const slideUpOut = new Keyframe("antSlideUpOut", {
|
|
"0%": {
|
|
transform: "scaleY(1)",
|
|
transformOrigin: "0% 0%",
|
|
opacity: 1
|
|
},
|
|
"100%": {
|
|
transform: "scaleY(0.8)",
|
|
transformOrigin: "0% 0%",
|
|
opacity: 0
|
|
}
|
|
});
|
|
const slideDownIn = new Keyframe("antSlideDownIn", {
|
|
"0%": {
|
|
transform: "scaleY(0.8)",
|
|
transformOrigin: "100% 100%",
|
|
opacity: 0
|
|
},
|
|
"100%": {
|
|
transform: "scaleY(1)",
|
|
transformOrigin: "100% 100%",
|
|
opacity: 1
|
|
}
|
|
});
|
|
const slideDownOut = new Keyframe("antSlideDownOut", {
|
|
"0%": {
|
|
transform: "scaleY(1)",
|
|
transformOrigin: "100% 100%",
|
|
opacity: 1
|
|
},
|
|
"100%": {
|
|
transform: "scaleY(0.8)",
|
|
transformOrigin: "100% 100%",
|
|
opacity: 0
|
|
}
|
|
});
|
|
const slideLeftIn = new Keyframe("antSlideLeftIn", {
|
|
"0%": {
|
|
transform: "scaleX(0.8)",
|
|
transformOrigin: "0% 0%",
|
|
opacity: 0
|
|
},
|
|
"100%": {
|
|
transform: "scaleX(1)",
|
|
transformOrigin: "0% 0%",
|
|
opacity: 1
|
|
}
|
|
});
|
|
const slideLeftOut = new Keyframe("antSlideLeftOut", {
|
|
"0%": {
|
|
transform: "scaleX(1)",
|
|
transformOrigin: "0% 0%",
|
|
opacity: 1
|
|
},
|
|
"100%": {
|
|
transform: "scaleX(0.8)",
|
|
transformOrigin: "0% 0%",
|
|
opacity: 0
|
|
}
|
|
});
|
|
const slideRightIn = new Keyframe("antSlideRightIn", {
|
|
"0%": {
|
|
transform: "scaleX(0.8)",
|
|
transformOrigin: "100% 0%",
|
|
opacity: 0
|
|
},
|
|
"100%": {
|
|
transform: "scaleX(1)",
|
|
transformOrigin: "100% 0%",
|
|
opacity: 1
|
|
}
|
|
});
|
|
const slideRightOut = new Keyframe("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
|
|
}
|
|
};
|
|
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
|
|
},
|
|
[`${motionCls}-leave`]: {
|
|
animationTimingFunction: token.motionEaseInQuint
|
|
}
|
|
}];
|
|
};
|
|
|
|
export { slideUpOut as a, slideDownIn as b, slideUpIn as c, initSlideMotion as i, slideDownOut as s };
|
|
//# sourceMappingURL=slide-DWlovEng.mjs.map
|