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:
@@ -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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user