fix: 消除页面切换残影,旧页瞬间移除仅新页淡入

页面过渡改为纯 opacity 且 exit 时长 0:配合 AnimatePresence mode="wait",
旧页立即卸载、不再残留一帧,只有新页淡入。既无交叉淡入淡出的残影,又保留
进场动画。

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
TerryM
2026-05-30 02:15:34 +08:00
parent ae14b33f83
commit 3d5681e7de

View File

@@ -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 = { export const pageTransition: Variants = {
initial: { opacity: 0, y: 8 }, initial: { opacity: 0 },
enter: { opacity: 1, y: 0, transition: { duration: 0.24, ease: EASE_OUT } }, enter: { opacity: 1, transition: { duration: 0.22, ease: EASE_OUT } },
exit: { opacity: 0, y: -6, transition: { duration: 0.16, ease: EASE_OUT } }, exit: { opacity: 0, transition: { duration: 0 } },
}; };
/** Springy hover lift for cards. Use rest/hover states on an `m` element. */ /** Springy hover lift for cards. Use rest/hover states on an `m` element. */