From 3d5681e7de24394382dab9e69e415e679e52294c Mon Sep 17 00:00:00 2001 From: TerryM Date: Sat, 30 May 2026 02:15:34 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=B6=88=E9=99=A4=E9=A1=B5=E9=9D=A2?= =?UTF-8?q?=E5=88=87=E6=8D=A2=E6=AE=8B=E5=BD=B1,=E6=97=A7=E9=A1=B5?= =?UTF-8?q?=E7=9E=AC=E9=97=B4=E7=A7=BB=E9=99=A4=E4=BB=85=E6=96=B0=E9=A1=B5?= =?UTF-8?q?=E6=B7=A1=E5=85=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 页面过渡改为纯 opacity 且 exit 时长 0:配合 AnimatePresence mode="wait", 旧页立即卸载、不再残留一帧,只有新页淡入。既无交叉淡入淡出的残影,又保留 进场动画。 Co-Authored-By: Claude Opus 4.8 (1M context) --- src/motion/variants.ts | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/motion/variants.ts b/src/motion/variants.ts index 34d641f..e37f035 100644 --- a/src/motion/variants.ts +++ b/src/motion/variants.ts @@ -41,11 +41,16 @@ export const staggerContainer: Variants = { }, }; -/** Route enter/exit transition used with AnimatePresence. */ +/** + * Route enter/exit transition used with AnimatePresence (mode="wait"). The old + * page is removed instantly (exit duration 0) so it never lingers as a ghost + * frame behind the incoming page; only the new page animates, fading in. This + * keeps a visible transition without any cross-fade overlap. + */ export const pageTransition: Variants = { - initial: { opacity: 0, y: 8 }, - enter: { opacity: 1, y: 0, transition: { duration: 0.24, ease: EASE_OUT } }, - exit: { opacity: 0, y: -6, transition: { duration: 0.16, ease: EASE_OUT } }, + initial: { opacity: 0 }, + enter: { opacity: 1, transition: { duration: 0.22, ease: EASE_OUT } }, + exit: { opacity: 0, transition: { duration: 0 } }, }; /** Springy hover lift for cards. Use rest/hover states on an `m` element. */