diff --git a/src/components/NavigationStackScene.tsx b/src/components/NavigationStackScene.tsx index 032d766..0fbbd24 100644 --- a/src/components/NavigationStackScene.tsx +++ b/src/components/NavigationStackScene.tsx @@ -33,18 +33,6 @@ export interface NavigationStackSceneProps { animationEasing?: string; /** Stagger-based delay in milliseconds (`spec.stagger × sceneIndex`). */ animationDelay?: number; - /** - * Inline `transform` fallback matching the animation's `from` keyframe. - * Applied only on entering scenes so the element starts at the correct off-screen - * position during the brief window before `@keyframes` registers in the cascade. - * The running animation always overrides this via the animation value layer. - */ - animationFromTransform?: string; - /** - * Inline `opacity` fallback matching the animation's `from` keyframe. - * Same purpose as `animationFromTransform`. - */ - animationFromOpacity?: number; /** When true, applies `overflow: hidden` to clip scene content during the transition. */ clipContent?: boolean; children?: ReactNode; @@ -81,8 +69,6 @@ export function NavigationStackScene( pointerEvents: props.isActive ? 'auto' : 'none', visibility: props.isActive || props.transitionState ? 'visible' : 'hidden', overflow: props.clipContent ? 'hidden' : undefined, - transform: props.animationFromTransform, - opacity: props.animationFromOpacity, animation: props.animationName ? `${props.animationName} ${duration}ms ${easing} ${delay}ms both` : undefined, diff --git a/src/components/NavigationStackViewport.tsx b/src/components/NavigationStackViewport.tsx index a833cd5..e99bf29 100644 --- a/src/components/NavigationStackViewport.tsx +++ b/src/components/NavigationStackViewport.tsx @@ -334,8 +334,6 @@ export function NavigationStackViewport( delay: number; easing: string; clip: boolean; - fromTransform: string | undefined; - fromOpacity: number | undefined; } >(), }; @@ -355,8 +353,6 @@ export function NavigationStackViewport( delay: number; easing: string; clip: boolean; - fromTransform: string | undefined; - fromOpacity: number | undefined; } >(); @@ -395,10 +391,6 @@ export function NavigationStackViewport( delay: keyframeResult.delay, easing, clip: !!spec.clip, - fromTransform: - phase === 'enter' ? keyframeResult.fromTransform : undefined, - fromOpacity: - phase === 'enter' ? keyframeResult.fromOpacity : undefined, }); } else { animations.set(entry.key, { @@ -406,8 +398,6 @@ export function NavigationStackViewport( delay: 0, easing, clip: !!spec.clip, - fromTransform: undefined, - fromOpacity: undefined, }); } }); @@ -433,7 +423,7 @@ export function NavigationStackViewport( const overflowStyle = (state.isTransitioning && state.transition?.spec.clip) || overflowBehavior === 'clip' - ? 'hidden' + ? 'clip' : 'visible'; if (renderableEntries.length === 0) { @@ -524,8 +514,6 @@ export function NavigationStackViewport( animationName={anim?.name} animationEasing={anim?.easing} animationDelay={anim?.delay} - animationFromTransform={anim?.fromTransform} - animationFromOpacity={anim?.fromOpacity} clipContent={anim?.clip} > {isActive || state.isTransitioning ? ( diff --git a/src/transitions/buildAnimationKeyframes.ts b/src/transitions/buildAnimationKeyframes.ts index 79339fc..7e3e7c6 100644 --- a/src/transitions/buildAnimationKeyframes.ts +++ b/src/transitions/buildAnimationKeyframes.ts @@ -13,17 +13,6 @@ export interface AnimationKeyframeResult { css: string; /** Animation delay in milliseconds (derived from spec.stagger × sceneIndex). */ delay: number; - /** - * CSS `transform` value of the animation's `from` keyframe (e.g. `"translateX(100%)"`). - * Apply as an inline style fallback on the entering scene so it starts at the correct - * off-screen position during the brief window before @keyframes registers in the cascade. - */ - fromTransform: string | undefined; - /** - * CSS `opacity` value of the animation's `from` keyframe. - * Apply as an inline style fallback on the entering scene for the same reason. - */ - fromOpacity: number | undefined; } function negateValue(value: number | string): number | string { @@ -283,11 +272,5 @@ export function buildAnimationKeyframes( `}`, ].join('\n'); - return { - name, - css, - delay, - fromTransform: hasTranslate || hasScale ? fromTransform : undefined, - fromOpacity: hasOpacity ? opacityFrom : undefined, - }; + return { name, css, delay }; }