1/5/1404
This commit is contained in:
@@ -0,0 +1,155 @@
|
||||
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
|
||||
Reference in New Issue
Block a user