Merge pull request 'Feat/ui animation enhancements' (#5) from feat/ui-animation-enhancements into master

Reviewed-on: #5

src/components/PageTransition.tsx

@@ -6,7 +6,6 @@ interface PageTransitionProps {
 }
 
 const EXIT_DURATION_MS = 180;
-const REDUCED_MOTION_EXIT_MS = 0;
 
 const NAV_ORDER: string[] = [
   "home",
@@ -38,14 +37,10 @@ function getNavIndex(key: string): number {
   return NAV_ORDER.indexOf(key);
 }
 
-const prefersReducedMotion = typeof window !== "undefined"
-  ? window.matchMedia("(prefers-reduced-motion: reduce)").matches
-  : false;
-
 export default function PageTransition({ viewKey, children }: PageTransitionProps) {
   const [displayedChildren, setDisplayedChildren] = useState(children);
   const [phase, setPhase] = useState<"idle" | "exit">("idle");
-  const [exitDirection, setExitDirection] = useState<"forward" | "backward" | "neutral">("neutral");
+  const [direction, setDirection] = useState<"forward" | "backward" | "neutral">("neutral");
   const prevKeyRef = useRef(viewKey);
   const timerRef = useRef<ReturnType<typeof setTimeout>>();
 
@@ -57,33 +52,25 @@ export default function PageTransition({ viewKey, children }: PageTransitionProp
     const prevIndex = getNavIndex(prevKeyRef.current);
     const nextIndex = getNavIndex(viewKey);
     if (prevIndex < nextIndex) {
-      setExitDirection("forward");
+      setDirection("forward");
     } else if (prevIndex > nextIndex) {
-      setExitDirection("backward");
+      setDirection("backward");
     } else {
-      setExitDirection("neutral");
+      setDirection("neutral");
     }
     prevKeyRef.current = viewKey;
-
-    if (prefersReducedMotion) {
-      setDisplayedChildren(children);
-      setPhase("idle");
-      return;
-    }
-
     setPhase("exit");
-    const duration = prefersReducedMotion ? REDUCED_MOTION_EXIT_MS : EXIT_DURATION_MS;
     timerRef.current = setTimeout(() => {
       setDisplayedChildren(children);
       setPhase("idle");
-    }, duration);
+    }, EXIT_DURATION_MS);
     return () => clearTimeout(timerRef.current);
   }, [viewKey, children]);
 
-  const dirClass = exitDirection === "forward" ? " is-forward" : exitDirection === "backward" ? " is-backward" : "";
+  const dirClass = direction === "forward" ? " is-forward" : direction === "backward" ? " is-backward" : "";
 
   return (
-    <div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : "page-transition-wrap"}>
+    <div className={phase === "exit" ? `page-transition-wrap page-motion--exit${dirClass}` : `page-transition-wrap${phase === "idle" && direction !== "neutral" ? ` page-motion--enter${dirClass}` : ""}`}>
       {displayedChildren}
     </div>
   );

src/styles/components/page-transition.css

@@ -16,7 +16,15 @@
   }
 }
 
-/* Directional exit transitions only — entrance is handled by child's page-motion */
+/* Directional page transitions */
+.page-motion--enter.is-forward {
+  animation: page-slide-in-forward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
+.page-motion--enter.is-backward {
+  animation: page-slide-in-backward 200ms var(--ease-out-expo, cubic-bezier(0.16, 1, 0.3, 1)) both;
+}
+
 .page-motion--exit.is-forward {
   animation: page-slide-out-forward 180ms ease both;
 }
@@ -25,6 +33,28 @@
   animation: page-slide-out-backward 180ms ease both;
 }
 
+@keyframes page-slide-in-forward {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes page-slide-in-backward {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 @keyframes page-slide-out-forward {
   to {
     opacity: 0;