@gx-design-vue/pro-layout 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/components/PageTransition/animate.d.ts

@@ -0,0 +1,41 @@
+//#region src/components/PageTransition/animate.d.ts
+/**
+ * 页面切换动画预设（迁移自 animate.css）。
+ * 每个预设含若干「方向变体」，与 keyFrame/*.ts 中的关键帧类名一一对应：
+ * 类名形如 `${name}${'In'|'Out'}${Direction}`，例如 `fadeInLeft`、`zoomOut`。
+ */
+interface AnimatePreset {
+  /** 动画名（同时是类名前缀） */
+  name: string;
+  /** 中文别名（仅用于展示/选择器） */
+  alias: string;
+  /** 可用方向变体；`'default'` 表示无方向后缀 */
+  directions: string[];
+}
+interface AnimateConfig {
+  preset: AnimatePreset[];
+}
+declare const animateSetting: AnimateConfig;
+/**
+ * 将方向反转为成对的相反方向（用于离场时让动画「倒放」）：
+ * 在 directions 数组中按相邻成对（0↔1、2↔3 …）互换；
+ * `x` / `y` 与空方向不反转。
+ */
+declare function reverseDirection(direction: string, directions: string[]): string;
+interface ResolveTransitionClassOptions {
+  /** 动画名 */
+  name: string;
+  /** 指定方向；未指定则取该预设首个方向 */
+  direction?: string;
+  /** 离场时是否反转方向 */
+  reverse: boolean;
+  /** 是否为离场（leave）阶段 */
+  isLeave: boolean;
+}
+/**
+ * 纯函数：根据动画名/方向/是否离场，解析出对应的关键帧类名。
+ * 未知动画名返回空串；`default` 方向无后缀。
+ */
+declare function resolveTransitionClass(options: ResolveTransitionClassOptions): string;
+//#endregion
+export { AnimateConfig, AnimatePreset, ResolveTransitionClassOptions, animateSetting, resolveTransitionClass, reverseDirection };

package/dist/components/PageTransition/animate.js

@@ -0,0 +1,106 @@
+//#region src/components/PageTransition/animate.ts
+/**
+* 页面切换动画预设（迁移自 animate.css）。
+* 每个预设含若干「方向变体」，与 keyFrame/*.ts 中的关键帧类名一一对应：
+* 类名形如 `${name}${'In'|'Out'}${Direction}`，例如 `fadeInLeft`、`zoomOut`。
+*/
+/** 水平方向（光速等仅左右） */
+const HORIZONTAL_DIRECTIONS = ["left", "right"];
+/** 四正方向 */
+const CARDINAL_DIRECTIONS = [
+	"left",
+	"right",
+	"down",
+	"up"
+];
+const animateSetting = { preset: [
+	{
+		name: "back",
+		alias: "渐近",
+		directions: CARDINAL_DIRECTIONS
+	},
+	{
+		name: "bounce",
+		alias: "弹跳",
+		directions: CARDINAL_DIRECTIONS.concat("default")
+	},
+	{
+		name: "fade",
+		alias: "淡化",
+		directions: CARDINAL_DIRECTIONS.concat([
+			"downBig",
+			"upBig",
+			"leftBig",
+			"rightBig"
+		]).concat([
+			"topLeft",
+			"bottomRight",
+			"topRight",
+			"bottomLeft"
+		]).concat("default")
+	},
+	{
+		name: "flip",
+		alias: "翻转",
+		directions: ["x", "y"]
+	},
+	{
+		name: "lightSpeed",
+		alias: "光速",
+		directions: HORIZONTAL_DIRECTIONS
+	},
+	{
+		name: "rotate",
+		alias: "旋转",
+		directions: [
+			"downLeft",
+			"upRight",
+			"downRight",
+			"upLeft"
+		].concat("default")
+	},
+	{
+		name: "roll",
+		alias: "翻滚",
+		directions: ["default"]
+	},
+	{
+		name: "zoom",
+		alias: "缩放",
+		directions: CARDINAL_DIRECTIONS.concat("default")
+	},
+	{
+		name: "slide",
+		alias: "滑动",
+		directions: CARDINAL_DIRECTIONS
+	}
+] };
+/**
+* 将方向反转为成对的相反方向（用于离场时让动画「倒放」）：
+* 在 directions 数组中按相邻成对（0↔1、2↔3 …）互换；
+* `x` / `y` 与空方向不反转。
+*/
+function reverseDirection(direction, directions) {
+	if (direction.length === 0 || direction === "x" || direction === "y") return direction;
+	const currentIndex = directions.indexOf(direction);
+	return directions[currentIndex % 2 === 1 ? currentIndex - 1 : currentIndex + 1] ?? direction;
+}
+/**
+* 纯函数：根据动画名/方向/是否离场，解析出对应的关键帧类名。
+* 未知动画名返回空串；`default` 方向无后缀。
+*/
+function resolveTransitionClass(options) {
+	const { name, direction: requestedDirection, reverse, isLeave } = options;
+	const preset = animateSetting.preset.find((item) => item.name === name);
+	if (!preset) return "";
+	let direction = requestedDirection === void 0 ? preset.directions[0] : preset.directions.find((item) => item === requestedDirection) || "";
+	direction = direction === void 0 || direction === "default" ? "" : direction;
+	if (direction !== "") {
+		direction = isLeave && reverse ? reverseDirection(direction, preset.directions) : direction;
+		direction = direction[0].toUpperCase() + direction.substring(1);
+	}
+	const phase = isLeave ? "Out" : "In";
+	return preset.name + phase + direction;
+}
+//#endregion
+export { animateSetting, resolveTransitionClass, reverseDirection };

package/dist/components/PageTransition/index.d.ts

@@ -0,0 +1,57 @@
+import { GPageTransitionSlots } from "../../interface.js";
+import { PropType, SlotsType } from "vue";
+
+//#region src/components/PageTransition/index.d.ts
+/**
+ * GPageTransition —— 基于 Vue `<Transition>` 的页面切换动画包裹组件。
+ * 通过 `name`/`direction` 选择 animate.css 预设动画；`reverse` 控制离场时方向倒放；
+ * `disabled` 时直接渲染子节点、不套动画。
+ */
+declare const GPageTransition: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+  prefixCls: {
+    type: PropType<string>;
+  }; /** 禁用动画，直接渲染子节点 */
+  disabled: {
+    type: PropType<boolean>;
+    default: boolean;
+  }; /** 离场时是否反转方向（让动画「倒放」） */
+  reverse: {
+    type: PropType<boolean>;
+    default: boolean;
+  }; /** 动画名，默认 'fade' */
+  name: {
+    type: PropType<string>;
+    default: string;
+  }; /** 方向变体；未指定则取该预设首个方向 */
+  direction: {
+    type: PropType<string>;
+    default: string;
+  };
+}>, () => any, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+  prefixCls: {
+    type: PropType<string>;
+  }; /** 禁用动画，直接渲染子节点 */
+  disabled: {
+    type: PropType<boolean>;
+    default: boolean;
+  }; /** 离场时是否反转方向（让动画「倒放」） */
+  reverse: {
+    type: PropType<boolean>;
+    default: boolean;
+  }; /** 动画名，默认 'fade' */
+  name: {
+    type: PropType<string>;
+    default: string;
+  }; /** 方向变体；未指定则取该预设首个方向 */
+  direction: {
+    type: PropType<string>;
+    default: string;
+  };
+}>> & Readonly<{}>, {
+  reverse: boolean;
+  direction: string;
+  name: string;
+  disabled: boolean;
+}, SlotsType<GPageTransitionSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+//#endregion
+export { GPageTransition as default };

package/dist/components/PageTransition/index.js

@@ -0,0 +1,66 @@
+import { resolveTransitionClass } from "./animate.js";
+import style_default from "./style.js";
+import { Transition, computed, createVNode, defineComponent } from "vue";
+import { useBaseConfig } from "antdv-next/config-provider/context";
+import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
+//#region src/components/PageTransition/index.tsx
+/**
+* GPageTransition —— 基于 Vue `<Transition>` 的页面切换动画包裹组件。
+* 通过 `name`/`direction` 选择 animate.css 预设动画；`reverse` 控制离场时方向倒放；
+* `disabled` 时直接渲染子节点、不套动画。
+*/
+const GPageTransition = /* @__PURE__ */ defineComponent({
+	name: "GPageTransition",
+	props: {
+		prefixCls: { type: String },
+		/** 禁用动画，直接渲染子节点 */
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		/** 离场时是否反转方向（让动画「倒放」） */
+		reverse: {
+			type: Boolean,
+			default: true
+		},
+		/** 动画名，默认 'fade' */
+		name: {
+			type: String,
+			default: "fade"
+		},
+		/** 方向变体；未指定则取该预设首个方向 */
+		direction: {
+			type: String,
+			default: "default"
+		}
+	},
+	slots: Object,
+	setup(props, { slots }) {
+		const { prefixCls } = useBaseConfig("pro-page-transition", props);
+		const [hashId, cssVarCls] = style_default(prefixCls, useCSSVarCls(prefixCls));
+		function buildClass(isLeave) {
+			return [
+				resolveTransitionClass({
+					name: props.name,
+					direction: props.direction,
+					reverse: props.reverse,
+					isLeave
+				}),
+				`${prefixCls.value}-${isLeave ? "leave" : "enter"}`,
+				hashId.value,
+				cssVarCls.value
+			].filter(Boolean).join(" ");
+		}
+		const enterActiveClass = computed(() => buildClass(false));
+		const leaveActiveClass = computed(() => buildClass(true));
+		return () => {
+			if (props.disabled) return slots.default?.();
+			return createVNode(Transition, {
+				"enterActiveClass": enterActiveClass.value,
+				"leaveActiveClass": leaveActiveClass.value
+			}, { default: () => [slots.default?.()] });
+		};
+	}
+});
+//#endregion
+export { GPageTransition as default };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/back.d.ts

@@ -1,7 +1,7 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-import { CSSObject as CSSObject$1 } from "ant-design-vue";
+import { CSSObject } from "@antdv-next/cssinjs";
 
-//#region src/components/PageTranstion/keyFrame/back.d.ts
+//#region src/components/PageTransition/keyFrame/back.d.ts
 declare const backInLeft: Keyframe;
 declare const backInRight: Keyframe;
 declare const backInUp: Keyframe;
@@ -10,7 +10,7 @@ declare const backOutLeft: Keyframe;
 declare const backOutRight: Keyframe;
 declare const backOutUp: Keyframe;
 declare const backOutDown: Keyframe;
-declare function PageBackIn(): CSSObject$1;
-declare function PageBackOut(): CSSObject$1;
+declare function PageBackIn(): CSSObject;
+declare function PageBackOut(): CSSObject;
 //#endregion
 export { PageBackIn, PageBackOut, backInDown, backInLeft, backInRight, backInUp, backOutDown, backOutLeft, backOutRight, backOutUp };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/back.js

@@ -1,6 +1,5 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-
-//#region src/components/PageTranstion/keyFrame/back.ts
+//#region src/components/PageTransition/keyFrame/back.ts
 const backInLeft = new Keyframe("backInLeft", {
 	"0%": {
 		opacity: .7,
@@ -153,6 +152,5 @@ function PageBackOut() {
 		}
 	};
 }
-
 //#endregion
-export { PageBackIn, PageBackOut, backInDown, backInLeft, backInRight, backInUp, backOutDown, backOutLeft, backOutRight, backOutUp };
+export { PageBackIn, PageBackOut, backInDown, backInLeft, backInRight, backInUp, backOutDown, backOutLeft, backOutRight, backOutUp };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/bounce.d.ts

@@ -1,7 +1,7 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-import { CSSObject as CSSObject$1 } from "ant-design-vue";
+import { CSSObject } from "@antdv-next/cssinjs";
 
-//#region src/components/PageTranstion/keyFrame/bounce.d.ts
+//#region src/components/PageTransition/keyFrame/bounce.d.ts
 declare const bounceIn: Keyframe;
 declare const bounceInLeft: Keyframe;
 declare const bounceInRight: Keyframe;
@@ -12,7 +12,7 @@ declare const bounceOutLeft: Keyframe;
 declare const bounceOutRight: Keyframe;
 declare const bounceOutDown: Keyframe;
 declare const bounceOutUp: Keyframe;
-declare function PageBounceIn(): CSSObject$1;
-declare function PageBounceOut(): CSSObject$1;
+declare function PageBounceIn(): CSSObject;
+declare function PageBounceOut(): CSSObject;
 //#endregion
 export { PageBounceIn, PageBounceOut, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/bounce.js

@@ -1,6 +1,5 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-
-//#region src/components/PageTranstion/keyFrame/bounce.ts
+//#region src/components/PageTransition/keyFrame/bounce.ts
 const bounceIn = new Keyframe("bounceIn", {
 	"from,20%,40%,60%,80%,to": { animationTimingFunction: "cubic-bezier(0.215, 0.61, 0.355, 1)" },
 	"0%": {
@@ -173,6 +172,5 @@ function PageBounceOut() {
 		}
 	};
 }
-
 //#endregion
-export { PageBounceIn, PageBounceOut, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp };
+export { PageBounceIn, PageBounceOut, bounceIn, bounceInDown, bounceInLeft, bounceInRight, bounceInUp, bounceOut, bounceOutDown, bounceOutLeft, bounceOutRight, bounceOutUp };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/fade.d.ts

@@ -1,7 +1,7 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-import { CSSObject as CSSObject$1 } from "ant-design-vue";
+import { CSSObject } from "@antdv-next/cssinjs";
 
-//#region src/components/PageTranstion/keyFrame/fade.d.ts
+//#region src/components/PageTransition/keyFrame/fade.d.ts
 declare const fadeIn: Keyframe;
 declare const fadeInLeft: Keyframe;
 declare const fadeInRight: Keyframe;
@@ -28,7 +28,7 @@ declare const fadeOutTopLeft: Keyframe;
 declare const fadeOutBottomRight: Keyframe;
 declare const fadeOutTopRight: Keyframe;
 declare const fadeOutBottomLeft: Keyframe;
-declare function PageFadeIn(): CSSObject$1;
-declare function PageFadeOut(): CSSObject$1;
+declare function PageFadeIn(): CSSObject;
+declare function PageFadeOut(): CSSObject;
 //#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 → PageTransition}/keyFrame/fade.js

@@ -1,6 +1,5 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-
-//#region src/components/PageTranstion/keyFrame/fade.ts
+//#region src/components/PageTransition/keyFrame/fade.ts
 const fadeIn = new Keyframe("fadeIn", {
 	"from": { opacity: 0 },
 	"to": { opacity: 1 }
@@ -337,6 +336,5 @@ function PageFadeOut() {
 		}
 	};
 }
-
 //#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 };
+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 → PageTransition}/keyFrame/flip.d.ts

@@ -1,12 +1,12 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-import { CSSObject as CSSObject$1 } from "ant-design-vue";
+import { CSSObject } from "@antdv-next/cssinjs";
 
-//#region src/components/PageTranstion/keyFrame/flip.d.ts
+//#region src/components/PageTransition/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;
+declare function PageFlipIn(): CSSObject;
+declare function PageFlipOut(): CSSObject;
 //#endregion
 export { PageFlipIn, PageFlipOut, flipInX, flipInY, flipOutX, flipOutY };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/flip.js

@@ -1,6 +1,5 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-
-//#region src/components/PageTranstion/keyFrame/flip.ts
+//#region src/components/PageTransition/keyFrame/flip.ts
 const flipInX = new Keyframe("flipInX", {
 	"from": {
 		opacity: 0,
@@ -87,6 +86,5 @@ function PageFlipOut() {
 		}
 	};
 }
-
 //#endregion
-export { PageFlipIn, PageFlipOut, flipInX, flipInY, flipOutX, flipOutY };
+export { PageFlipIn, PageFlipOut, flipInX, flipInY, flipOutX, flipOutY };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/lightSpeed.d.ts

@@ -1,12 +1,12 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-import { CSSObject as CSSObject$1 } from "ant-design-vue";
+import { CSSObject } from "@antdv-next/cssinjs";
 
-//#region src/components/PageTranstion/keyFrame/lightSpeed.d.ts
+//#region src/components/PageTransition/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;
+declare function PageLightSpeedIn(): CSSObject;
+declare function PageLightSpeedOut(): CSSObject;
 //#endregion
 export { PageLightSpeedIn, PageLightSpeedOut, lightSpeedInLeft, lightSpeedInRight, lightSpeedOutLeft, lightSpeedOutRight };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/lightSpeed.js

@@ -1,6 +1,5 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-
-//#region src/components/PageTranstion/keyFrame/lightSpeed.ts
+//#region src/components/PageTransition/keyFrame/lightSpeed.ts
 const lightSpeedInLeft = new Keyframe("lightSpeedInLeft", {
 	"from": {
 		opacity: 0,
@@ -67,6 +66,5 @@ function PageLightSpeedOut() {
 		}
 	};
 }
-
 //#endregion
-export { PageLightSpeedIn, PageLightSpeedOut, lightSpeedInLeft, lightSpeedInRight, lightSpeedOutLeft, lightSpeedOutRight };
+export { PageLightSpeedIn, PageLightSpeedOut, lightSpeedInLeft, lightSpeedInRight, lightSpeedOutLeft, lightSpeedOutRight };

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

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

package/dist/components/{PageTranstion → PageTransition}/keyFrame/roll.js

@@ -1,6 +1,5 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-
-//#region src/components/PageTranstion/keyFrame/roll.ts
+//#region src/components/PageTransition/keyFrame/roll.ts
 const rollIn = new Keyframe("rollIn", {
 	"from": {
 		opacity: 0,
@@ -30,6 +29,5 @@ function PageRollOut() {
 		animationName: rollOut
 	} };
 }
-
 //#endregion
-export { PageRollIn, PageRollOut, rollIn, rollOut };
+export { PageRollIn, PageRollOut, rollIn, rollOut };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/rotate.d.ts

@@ -1,7 +1,7 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-import { CSSObject as CSSObject$1 } from "ant-design-vue";
+import { CSSObject } from "@antdv-next/cssinjs";
 
-//#region src/components/PageTranstion/keyFrame/rotate.d.ts
+//#region src/components/PageTransition/keyFrame/rotate.d.ts
 declare const rotateIn: Keyframe;
 declare const rotateInDownLeft: Keyframe;
 declare const rotateInDownRight: Keyframe;
@@ -12,7 +12,7 @@ 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;
+declare function PageRotateIn(): CSSObject;
+declare function PageRotateOut(): CSSObject;
 //#endregion
 export { PageRotateIn, PageRotateOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/rotate.js

@@ -1,6 +1,5 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-
-//#region src/components/PageTranstion/keyFrame/rotate.ts
+//#region src/components/PageTransition/keyFrame/rotate.ts
 const rotateIn = new Keyframe("rotateIn", {
 	"from": {
 		opacity: 0,
@@ -144,6 +143,5 @@ function PageRotateOut() {
 		}
 	};
 }
-
 //#endregion
-export { PageRotateIn, PageRotateOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight };
+export { PageRotateIn, PageRotateOut, rotateIn, rotateInDownLeft, rotateInDownRight, rotateInUpLeft, rotateInUpRight, rotateOut, rotateOutDownLeft, rotateOutDownRight, rotateOutUpLeft, rotateOutUpRight };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/slide.d.ts

@@ -1,7 +1,7 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-import { CSSObject as CSSObject$1 } from "ant-design-vue";
+import { CSSObject } from "@antdv-next/cssinjs";
 
-//#region src/components/PageTranstion/keyFrame/slide.d.ts
+//#region src/components/PageTransition/keyFrame/slide.d.ts
 declare const slideInDown: Keyframe;
 declare const slideInLeft: Keyframe;
 declare const slideInRight: Keyframe;
@@ -10,7 +10,7 @@ declare const slideOutDown: Keyframe;
 declare const slideOutLeft: Keyframe;
 declare const slideOutRight: Keyframe;
 declare const slideOutUp: Keyframe;
-declare function PageSlideIn(): CSSObject$1;
-declare function PageSlideOut(): CSSObject$1;
+declare function PageSlideIn(): CSSObject;
+declare function PageSlideOut(): CSSObject;
 //#endregion
 export { PageSlideIn, PageSlideOut, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutLeft, slideOutRight, slideOutUp };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/slide.js

@@ -1,6 +1,5 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-
-//#region src/components/PageTranstion/keyFrame/slide.ts
+//#region src/components/PageTransition/keyFrame/slide.ts
 const slideInDown = new Keyframe("slideInDown", {
 	"from": {
 		transform: "translate3d(0, -100%, 0)",
@@ -97,6 +96,5 @@ function PageSlideOut() {
 		}
 	};
 }
-
 //#endregion
-export { PageSlideIn, PageSlideOut, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutLeft, slideOutRight, slideOutUp };
+export { PageSlideIn, PageSlideOut, slideInDown, slideInLeft, slideInRight, slideInUp, slideOutDown, slideOutLeft, slideOutRight, slideOutUp };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/zoom.d.ts

@@ -1,7 +1,7 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-import { CSSObject as CSSObject$1 } from "ant-design-vue";
+import { CSSObject } from "@antdv-next/cssinjs";
 
-//#region src/components/PageTranstion/keyFrame/zoom.d.ts
+//#region src/components/PageTransition/keyFrame/zoom.d.ts
 declare const zoomIn: Keyframe;
 declare const zoomInDown: Keyframe;
 declare const zoomInLeft: Keyframe;
@@ -12,7 +12,7 @@ declare const zoomOutDown: Keyframe;
 declare const zoomOutLeft: Keyframe;
 declare const zoomOutRight: Keyframe;
 declare const zoomOutUp: Keyframe;
-declare function PageZoomIn(): CSSObject$1;
-declare function PageZoomOut(): CSSObject$1;
+declare function PageZoomIn(): CSSObject;
+declare function PageZoomOut(): CSSObject;
 //#endregion
 export { PageZoomIn, PageZoomOut, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp };

package/dist/components/{PageTranstion → PageTransition}/keyFrame/zoom.js

@@ -1,6 +1,5 @@
 import { Keyframe } from "@gx-design-vue/pro-provider";
-
-//#region src/components/PageTranstion/keyFrame/zoom.ts
+//#region src/components/PageTransition/keyFrame/zoom.ts
 const zoomIn = new Keyframe("zoomIn", {
 	"from": {
 		opacity: 0,
@@ -160,6 +159,5 @@ function PageZoomOut() {
 		}
 	};
 }
-
 //#endregion
-export { PageZoomIn, PageZoomOut, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp };
+export { PageZoomIn, PageZoomOut, zoomIn, zoomInDown, zoomInLeft, zoomInRight, zoomInUp, zoomOut, zoomOutDown, zoomOutLeft, zoomOutRight, zoomOutUp };

package/dist/components/PageTransition/style.d.ts

@@ -0,0 +1,11 @@
+import { ProFullToken } from "@gx-design-vue/pro-provider";
+import { CSSObject } from "@antdv-next/cssinjs";
+import { GenerateStyle } from "antdv-next/dist/theme/internal";
+
+//#region src/components/PageTransition/style.d.ts
+type ComponentToken = Record<string, any>;
+/** GPageTransition 样式：进场/离场两段，合并所有预设关键帧。 */
+declare const genPageTransitionStyle: GenerateStyle<ProFullToken<'ProPageTransition'>, CSSObject>;
+declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
+//#endregion
+export { ComponentToken, _default as default, genPageTransitionStyle };

package/dist/components/{PageTranstion → PageTransition}/style.js

@@ -7,11 +7,12 @@ import { PageRollIn, PageRollOut } from "./keyFrame/roll.js";
 import { PageRotateIn, PageRotateOut } from "./keyFrame/rotate.js";
 import { PageSlideIn, PageSlideOut } from "./keyFrame/slide.js";
 import { PageZoomIn, PageZoomOut } from "./keyFrame/zoom.js";
-import { useStyle as useStyle$1 } from "@gx-design-vue/pro-provider";
-
-//#region src/components/PageTranstion/style.ts
-const ProLayoutPageTransition = (token) => {
-	return { [token.componentCls]: {
+import { proGenStyleHooks } from "@gx-design-vue/pro-provider";
+//#region src/components/PageTransition/style.ts
+/** GPageTransition 样式：进场/离场两段，合并所有预设关键帧。 */
+const genPageTransitionStyle = (token) => {
+	const { componentCls } = token;
+	return { [componentCls]: {
 		"&-enter": {
 			background: "transparent",
 			animationDuration: ".3s !important",
@@ -26,7 +27,7 @@ const ProLayoutPageTransition = (token) => {
 			...PageSlideIn()
 		},
 		"&-leave": {
-			display: "none",
+			display: "none !important",
 			background: "transparent",
 			animationDuration: ".3s !important",
 			...PageBackOut(),
@@ -41,11 +42,6 @@ const ProLayoutPageTransition = (token) => {
 		}
 	} };
 };
-function useStyle(componentCls) {
-	return useStyle$1("PageTranstion", (token) => {
-		return [ProLayoutPageTransition(token)];
-	}, componentCls);
-}
-
+var style_default = proGenStyleHooks("ProPageTransition", genPageTransitionStyle);
 //#endregion
-export { useStyle };
+export { style_default as default, genPageTransitionStyle };