156 lines
3.3 KiB
JavaScript
156 lines
3.3 KiB
JavaScript
import { ref, watch } from 'vue';
|
|
import { $ as Keyframe, as as initMotion } from './server.mjs';
|
|
|
|
function useMemo(getValue, condition, shouldUpdate) {
|
|
const cacheRef = ref(getValue());
|
|
watch(condition, (next, pre) => {
|
|
if (shouldUpdate) {
|
|
if (shouldUpdate(next, pre)) {
|
|
cacheRef.value = getValue();
|
|
}
|
|
} else {
|
|
cacheRef.value = getValue();
|
|
}
|
|
});
|
|
return cacheRef;
|
|
}
|
|
const moveDownIn = new Keyframe("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 = new Keyframe("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 = new Keyframe("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 = new Keyframe("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 = new Keyframe("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 = new Keyframe("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 = new Keyframe("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 = new Keyframe("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 [initMotion(motionCls, inKeyframes, outKeyframes, token.motionDurationMid), {
|
|
[`
|
|
${motionCls}-enter,
|
|
${motionCls}-appear
|
|
`]: {
|
|
opacity: 0,
|
|
animationTimingFunction: token.motionEaseOutCirc
|
|
},
|
|
[`${motionCls}-leave`]: {
|
|
animationTimingFunction: token.motionEaseInOutCirc
|
|
}
|
|
}];
|
|
};
|
|
|
|
export { initMoveMotion as i, useMemo as u };
|
|
//# sourceMappingURL=move-BSi4LOZX.mjs.map
|