@gx-design-vue/pro-layout 0.1.0-alpha.0

package/dist/components/PageTranstion/keyFrame/fade.js

@@ -0,0 +1,342 @@
+import { Keyframe } from "@gx-design-vue/pro-provider";
+
+//#region src/components/PageTranstion/keyFrame/fade.ts
+const fadeIn = new Keyframe("fadeIn", {
+	"from": { opacity: 0 },
+	"to": { opacity: 1 }
+});
+const fadeInLeft = new Keyframe("fadeInLeft", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(-100%, 0, 0)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const fadeInRight = new Keyframe("fadeInRight", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(100%, 0, 0)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const fadeInDown = new Keyframe("fadeInDown", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(0, -100%, 0)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const fadeInUp = new Keyframe("fadeInUp", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(0, 100%, 0)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const fadeInDownBig = new Keyframe("fadeInDownBig", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(0, -2000px, 0)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const fadeInUpBig = new Keyframe("fadeInUpBig", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(0, 2000px, 0)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const fadeInLeftBig = new Keyframe("fadeInLeftBig", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(-2000px, 0, 0)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const fadeInRightBig = new Keyframe("fadeInRightBig", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(2000px, 0, 0)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const fadeInTopLeft = new Keyframe("fadeInTopLeft", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(-100%, -100%, 0)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const fadeInBottomRight = new Keyframe("fadeInBottomRight", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(100%, 100%, 0)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const fadeInTopRight = new Keyframe("fadeInTopRight", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(100%, -100%, 0)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const fadeInBottomLeft = new Keyframe("fadeInBottomLeft", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(-100%, 100%, 0)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const fadeOut = new Keyframe("fadeOut", {
+	"from": { opacity: 1 },
+	"to": { opacity: 0 }
+});
+const fadeOutLeft = new Keyframe("fadeOutLeft", {
+	"from": { opacity: 1 },
+	"to": {
+		opacity: 0,
+		transform: "translate3d(-100%, 0, 0)"
+	}
+});
+const fadeOutRight = new Keyframe("fadeOutRight", {
+	"from": { opacity: 1 },
+	"to": {
+		opacity: 0,
+		transform: "translate3d(100%, 0, 0)"
+	}
+});
+const fadeOutDown = new Keyframe("fadeOutDown", {
+	"from": { opacity: 1 },
+	"to": {
+		opacity: 0,
+		transform: "translate3d(0, 100%, 0)"
+	}
+});
+const fadeOutUp = new Keyframe("fadeOutUp", {
+	"from": { opacity: 1 },
+	"to": {
+		opacity: 0,
+		transform: "translate3d(0, -100%, 0)"
+	}
+});
+const fadeOutDownBig = new Keyframe("fadeOutDownBig", {
+	"from": { opacity: 1 },
+	"to": {
+		opacity: 0,
+		transform: "translate3d(0, 2000px, 0)"
+	}
+});
+const fadeOutUpBig = new Keyframe("fadeOutUpBig", {
+	"from": { opacity: 1 },
+	"to": {
+		opacity: 0,
+		transform: "translate3d(0, -2000px, 0)"
+	}
+});
+const fadeOutLeftBig = new Keyframe("fadeOutLeftBig", {
+	"from": { opacity: 1 },
+	"to": {
+		opacity: 0,
+		transform: "translate3d(-2000px, 0, 0)"
+	}
+});
+const fadeOutRightBig = new Keyframe("fadeOutRightBig", {
+	"from": { opacity: 1 },
+	"to": {
+		opacity: 0,
+		transform: "translate3d(2000px, 0, 0)"
+	}
+});
+const fadeOutTopLeft = new Keyframe("fadeOutTopLeft", {
+	"from": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	},
+	"to": {
+		opacity: 0,
+		transform: "translate3d(-100%, -100%, 0)"
+	}
+});
+const fadeOutBottomRight = new Keyframe("fadeOutBottomRight", {
+	"from": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	},
+	"to": {
+		opacity: 0,
+		transform: "translate3d(100%, 100%, 0)"
+	}
+});
+const fadeOutTopRight = new Keyframe("fadeOutTopRight", {
+	"from": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	},
+	"to": {
+		opacity: 0,
+		transform: "translate3d(100%, -100%, 0)"
+	}
+});
+const fadeOutBottomLeft = new Keyframe("fadeOutBottomLeft", {
+	"from": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	},
+	"to": {
+		opacity: 0,
+		transform: "translate3d(-100%, 100%, 0)"
+	}
+});
+function PageFadeIn() {
+	return {
+		"&.fadeIn": {
+			animationFillMode: "both",
+			animationName: fadeIn
+		},
+		"&.fadeInLeft": {
+			animationFillMode: "both",
+			animationName: fadeInLeft
+		},
+		"&.fadeInRight": {
+			animationFillMode: "both",
+			animationName: fadeInRight
+		},
+		"&.fadeInDown": {
+			animationFillMode: "both",
+			animationName: fadeInDown
+		},
+		"&.fadeInUp": {
+			animationFillMode: "both",
+			animationName: fadeInUp
+		},
+		"&.fadeInLeftBig": {
+			animationFillMode: "both",
+			animationName: fadeInLeftBig
+		},
+		"&.fadeInRightBig": {
+			animationFillMode: "both",
+			animationName: fadeInRightBig
+		},
+		"&.fadeInUpBig": {
+			animationFillMode: "both",
+			animationName: fadeInUpBig
+		},
+		"&.fadeInDownBig": {
+			animationFillMode: "both",
+			animationName: fadeInDownBig
+		},
+		"&.fadeInTopLeft": {
+			animationFillMode: "both",
+			animationName: fadeInTopLeft
+		},
+		"&.fadeInBottomRight": {
+			animationFillMode: "both",
+			animationName: fadeInBottomRight
+		},
+		"&.fadeInTopRight": {
+			animationFillMode: "both",
+			animationName: fadeInTopRight
+		},
+		"&.fadeInBottomLeft": {
+			animationFillMode: "both",
+			animationName: fadeInBottomLeft
+		}
+	};
+}
+function PageFadeOut() {
+	return {
+		"&.fadeOut": {
+			animationFillMode: "both",
+			animationName: fadeOut
+		},
+		"&.fadeOutLeft": {
+			animationFillMode: "both",
+			animationName: fadeOutLeft
+		},
+		"&.fadeOutRight": {
+			animationFillMode: "both",
+			animationName: fadeOutRight
+		},
+		"&.fadeOutDown": {
+			animationFillMode: "both",
+			animationName: fadeOutDown
+		},
+		"&.fadeOutUp": {
+			animationFillMode: "both",
+			animationName: fadeOutUp
+		},
+		"&.fadeOutDownBig": {
+			animationFillMode: "both",
+			animationName: fadeOutDownBig
+		},
+		"&.fadeOutUpBig": {
+			animationFillMode: "both",
+			animationName: fadeOutUpBig
+		},
+		"&.fadeOutLeftBig": {
+			animationFillMode: "both",
+			animationName: fadeOutLeftBig
+		},
+		"&.fadeOutRightBig": {
+			animationFillMode: "both",
+			animationName: fadeOutRightBig
+		},
+		"&.fadeOutTopLeft": {
+			animationFillMode: "both",
+			animationName: fadeOutTopLeft
+		},
+		"&.fadeOutBottomRight": {
+			animationFillMode: "both",
+			animationName: fadeOutBottomRight
+		},
+		"&.fadeOutTopRight": {
+			animationFillMode: "both",
+			animationName: fadeOutTopRight
+		},
+		"&.fadeOutBottomLeft": {
+			animationFillMode: "both",
+			animationName: fadeOutBottomLeft
+		}
+	};
+}
+
+//#endregion
+export { PageFadeIn, PageFadeOut, fadeIn, fadeInBottomLeft, fadeInBottomRight, fadeInDown, fadeInDownBig, fadeInLeft, fadeInLeftBig, fadeInRight, fadeInRightBig, fadeInTopLeft, fadeInTopRight, fadeInUp, fadeInUpBig, fadeOut, fadeOutBottomLeft, fadeOutBottomRight, fadeOutDown, fadeOutDownBig, fadeOutLeft, fadeOutLeftBig, fadeOutRight, fadeOutRightBig, fadeOutTopLeft, fadeOutTopRight, fadeOutUp, fadeOutUpBig };

package/dist/components/PageTranstion/keyFrame/flip.d.ts

@@ -0,0 +1,12 @@
+import { Keyframe } from "@gx-design-vue/pro-provider";
+import { CSSObject as CSSObject$1 } from "ant-design-vue";
+
+//#region src/components/PageTranstion/keyFrame/flip.d.ts
+declare const flipInX: Keyframe;
+declare const flipInY: Keyframe;
+declare const flipOutX: Keyframe;
+declare const flipOutY: Keyframe;
+declare function PageFlipIn(): CSSObject$1;
+declare function PageFlipOut(): CSSObject$1;
+//#endregion
+export { PageFlipIn, PageFlipOut, flipInX, flipInY, flipOutX, flipOutY };

package/dist/components/PageTranstion/keyFrame/flip.js

@@ -0,0 +1,92 @@
+import { Keyframe } from "@gx-design-vue/pro-provider";
+
+//#region src/components/PageTranstion/keyFrame/flip.ts
+const flipInX = new Keyframe("flipInX", {
+	"from": {
+		opacity: 0,
+		animationTimingFunction: "ease-in",
+		transform: "perspective(400px) rotate3d(1, 0, 0, 90deg)"
+	},
+	"40%": {
+		animationTimingFunction: "ease-in",
+		transform: "perspective(400px) rotate3d(1, 0, 0, -20deg)"
+	},
+	"60%": {
+		opacity: 1,
+		transform: "perspective(400px) rotate3d(1, 0, 0, 10deg)"
+	},
+	"80%": { transform: "perspective(400px) rotate3d(1, 0, 0, -5deg)" },
+	"to": { transform: "perspective(400px)" }
+});
+const flipInY = new Keyframe("flipInY", {
+	"from": {
+		opacity: 0,
+		animationTimingFunction: "ease-in",
+		transform: "perspective(400px) rotate3d(0, 1, 0, 90deg)"
+	},
+	"40%": {
+		animationTimingFunction: "ease-in",
+		transform: "perspective(400px) rotate3d(0, 1, 0, -20deg)"
+	},
+	"60%": {
+		opacity: 1,
+		transform: "perspective(400px) rotate3d(0, 1, 0, 10deg)"
+	},
+	"80%": { transform: "perspective(400px) rotate3d(0, 1, 0, -5deg)" },
+	"to": { transform: "perspective(400px)" }
+});
+const flipOutX = new Keyframe("flipOutX", {
+	"from": { transform: "perspective(400px)" },
+	"40%": {
+		opacity: 1,
+		transform: "perspective(400px) rotate3d(1, 0, 0, -20deg)"
+	},
+	"to": {
+		opacity: 0,
+		transform: "perspective(400px) rotate3d(1, 0, 0, 90deg)"
+	}
+});
+const flipOutY = new Keyframe("flipOutY", {
+	"from": { transform: "perspective(400px)" },
+	"40%": {
+		opacity: 1,
+		transform: "perspective(400px) rotate3d(0, 1, 0, -15deg)"
+	},
+	"to": {
+		opacity: 0,
+		transform: "perspective(400px) rotate3d(0, 1, 0, 90deg)"
+	}
+});
+function PageFlipIn() {
+	return {
+		"&.flipInX": {
+			animationFillMode: "both",
+			backfaceVisibility: "visible !important",
+			animationName: flipInX
+		},
+		"&.flipInY": {
+			animationFillMode: "both",
+			backfaceVisibility: "visible !important",
+			animationName: flipInY
+		}
+	};
+}
+function PageFlipOut() {
+	return {
+		"&.flipOutX": {
+			animationFillMode: "both",
+			backfaceVisibility: "visible !important",
+			animationDuration: `${.3 * .75}s !important`,
+			animationName: flipOutX
+		},
+		"&.flipOutY": {
+			animationFillMode: "both",
+			backfaceVisibility: "visible !important",
+			animationDuration: `${.3 * .75}s !important`,
+			animationName: flipOutY
+		}
+	};
+}
+
+//#endregion
+export { PageFlipIn, PageFlipOut, flipInX, flipInY, flipOutX, flipOutY };

package/dist/components/PageTranstion/keyFrame/lightSpeed.d.ts

@@ -0,0 +1,12 @@
+import { Keyframe } from "@gx-design-vue/pro-provider";
+import { CSSObject as CSSObject$1 } from "ant-design-vue";
+
+//#region src/components/PageTranstion/keyFrame/lightSpeed.d.ts
+declare const lightSpeedInLeft: Keyframe;
+declare const lightSpeedInRight: Keyframe;
+declare const lightSpeedOutLeft: Keyframe;
+declare const lightSpeedOutRight: Keyframe;
+declare function PageLightSpeedIn(): CSSObject$1;
+declare function PageLightSpeedOut(): CSSObject$1;
+//#endregion
+export { PageLightSpeedIn, PageLightSpeedOut, lightSpeedInLeft, lightSpeedInRight, lightSpeedOutLeft, lightSpeedOutRight };

package/dist/components/PageTranstion/keyFrame/lightSpeed.js

@@ -0,0 +1,72 @@
+import { Keyframe } from "@gx-design-vue/pro-provider";
+
+//#region src/components/PageTranstion/keyFrame/lightSpeed.ts
+const lightSpeedInLeft = new Keyframe("lightSpeedInLeft", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(-100%, 0, 0) skewX(30deg)"
+	},
+	"60%": {
+		opacity: 1,
+		transform: "skewX(-20deg)"
+	},
+	"80%": { transform: "skewX(5deg)" },
+	"to": { transform: "translate3d(0, 0, 0)" }
+});
+const lightSpeedInRight = new Keyframe("lightSpeedInRight", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(100%, 0, 0) skewX(-30deg)"
+	},
+	"60%": {
+		opacity: 1,
+		transform: "skewX(20deg)"
+	},
+	"80%": { transform: "skewX(-5deg)" },
+	"to": { transform: "translate3d(0, 0, 0)" }
+});
+const lightSpeedOutLeft = new Keyframe("lightSpeedOutLeft", {
+	"from": { opacity: 1 },
+	"to": {
+		opacity: 0,
+		transform: "translate3d(-100%, 0, 0) skewX(-30deg)"
+	}
+});
+const lightSpeedOutRight = new Keyframe("lightSpeedOutRight", {
+	"from": { opacity: 1 },
+	"to": {
+		opacity: 0,
+		transform: "translate3d(100%, 0, 0) skewX(30deg)"
+	}
+});
+function PageLightSpeedIn() {
+	return {
+		"&.lightSpeedInLeft": {
+			animationFillMode: "both",
+			animationTimingFunction: "ease-out",
+			animationName: lightSpeedInLeft
+		},
+		"&.lightSpeedInRight": {
+			animationFillMode: "both",
+			animationTimingFunction: "ease-out",
+			animationName: lightSpeedInRight
+		}
+	};
+}
+function PageLightSpeedOut() {
+	return {
+		"&.lightSpeedOutLeft": {
+			animationFillMode: "both",
+			animationTimingFunction: "ease-in",
+			animationName: lightSpeedOutLeft
+		},
+		"&.lightSpeedOutRight": {
+			animationFillMode: "both",
+			animationTimingFunction: "ease-in",
+			animationName: lightSpeedOutRight
+		}
+	};
+}
+
+//#endregion
+export { PageLightSpeedIn, PageLightSpeedOut, lightSpeedInLeft, lightSpeedInRight, lightSpeedOutLeft, lightSpeedOutRight };

package/dist/components/PageTranstion/keyFrame/roll.d.ts

@@ -0,0 +1,10 @@
+import { Keyframe } from "@gx-design-vue/pro-provider";
+import { CSSObject as CSSObject$1 } from "ant-design-vue";
+
+//#region src/components/PageTranstion/keyFrame/roll.d.ts
+declare const rollIn: Keyframe;
+declare const rollOut: Keyframe;
+declare function PageRollIn(): CSSObject$1;
+declare function PageRollOut(): CSSObject$1;
+//#endregion
+export { PageRollIn, PageRollOut, rollIn, rollOut };

package/dist/components/PageTranstion/keyFrame/roll.js

@@ -0,0 +1,35 @@
+import { Keyframe } from "@gx-design-vue/pro-provider";
+
+//#region src/components/PageTranstion/keyFrame/roll.ts
+const rollIn = new Keyframe("rollIn", {
+	"from": {
+		opacity: 0,
+		transform: "translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg)"
+	},
+	"to": {
+		opacity: 1,
+		transform: "translate3d(0, 0, 0)"
+	}
+});
+const rollOut = new Keyframe("rollOut", {
+	"from": { opacity: 1 },
+	"to": {
+		opacity: 0,
+		transform: "translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg)"
+	}
+});
+function PageRollIn() {
+	return { "&.rollIn": {
+		animationFillMode: "both",
+		animationName: rollIn
+	} };
+}
+function PageRollOut() {
+	return { "&.rollOut": {
+		animationFillMode: "both",
+		animationName: rollOut
+	} };
+}
+
+//#endregion
+export { PageRollIn, PageRollOut, rollIn, rollOut };

package/dist/components/PageTranstion/keyFrame/rotate.d.ts

@@ -0,0 +1,18 @@
+import { Keyframe } from "@gx-design-vue/pro-provider";
+import { CSSObject as CSSObject$1 } from "ant-design-vue";
+
+//#region src/components/PageTranstion/keyFrame/rotate.d.ts
+declare const rotateIn: Keyframe;
+declare const rotateInDownLeft: Keyframe;
+declare const rotateInDownRight: Keyframe;
+declare const rotateInUpLeft: Keyframe;
+declare const rotateInUpRight: Keyframe;
+declare const rotateOut: Keyframe;
+declare const rotateOutDownLeft: Keyframe;
+declare const rotateOutDownRight: Keyframe;
+declare const rotateOutUpLeft: Keyframe;
+declare const rotateOutUpRight: Keyframe;
+declare function PageRotateIn(): CSSObject$1;
+declare function PageRotateOut(): CSSObject$1;
+//#endregion
+export { PageRotateIn, PageRotateOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight };