more styles

src/features/core/components/layout.tsx

@@ -1,5 +1,6 @@
-import { AppShell } from '@mantine/core';
+import { AppShell, Box } from '@mantine/core';
 import { PropsWithChildren } from 'react';
+import { useLocation } from '@tanstack/react-router';
 import Header from './header';
 import Navbar from './navbar';
 import Pullable from './pullable';
@@ -11,6 +12,7 @@ import './route-transition.css';
 const Layout: React.FC<PropsWithChildren> = ({ children }) => {
   const { header, withPadding, fullWidth } = useRouterConfig();
   const viewport = useVisualViewportSize();
+  const location = useLocation();
 
   return (
     <AppShell
@@ -48,7 +50,9 @@ const Layout: React.FC<PropsWithChildren> = ({ children }) => {
       >
         <Pullable>
           <Page noPadding={!withPadding} fullWidth={fullWidth}>
-            {children}
+            <Box key={location.pathname} className="flxn-route-enter">
+              {children}
+            </Box>
           </Page>
         </Pullable>
       </AppShell.Main>

src/features/core/components/route-transition.css

@@ -1,24 +1,6 @@
 @media (prefers-reduced-motion: no-preference) {
-  ::view-transition-old(root) {
-    animation: flxn-route-fade-out 120ms ease-out both;
-  }
-
-  ::view-transition-new(root) {
-    animation: flxn-route-fade-in 200ms ease-out both;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  ::view-transition-group(*),
-  ::view-transition-old(*),
-  ::view-transition-new(*) {
-    animation: none !important;
-  }
-}
-
-@keyframes flxn-route-fade-out {
-  to {
-    opacity: 0;
+  .flxn-route-enter {
+    animation: flxn-route-fade-in 180ms ease-out;
   }
 }