fix: page transition UI jitter — remove enter phase to prevent double animation

The three-phase exit→enter→idle flow caused a visible "double refresh"
jitter. During the enter phase (220ms), the wrapper animated from
opacity:0 while cancelling child .page-motion with animation:none
!important. When phase switched to idle, the !important rule was
removed and child .page-motion re-triggered, creating a second
entrance animation — the jitter.

Fix: remove the enter phase entirely. After exit animation (180ms),
phase goes directly to idle. The child page's own .page-motion class
handles entrance naturally via React's fresh DOM mount. No wrapper
animation on enter, no double-animation conflict.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
2026-06-02 22:19:14 +08:00
parent ec9204437d
commit e555209516
2 changed files with 3 additions and 47 deletions
-20
View File
@@ -53,24 +53,4 @@
opacity: 0;
transform: translateX(16px);
}
}
/* Enter: explicit wrapper entrance animation overrides child page-motion */
.page-motion--enter {
animation: page-enter-fade 220ms ease both;
}
.page-motion--enter .page-motion {
animation: none !important;
}
@keyframes page-enter-fade {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}