Customize navigation view transition

src/components/layout/App.tsx

@@ -19,7 +19,7 @@ export default function App() {
 			<div className={classes}>
 				<Header />
 				<Sidebar />
-				<main className="mx-4 lg:mx-8 mt-24 sm:mt-28 lg:mt-0">
+				<main className="mx-4 lg:mx-8 mt-24 sm:mt-28 lg:mt-0 [view-transition-name:main-content]">
 					<Outlet />
 				</main>
 			</div>

src/index.css

@@ -17,3 +17,35 @@ html {
 code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
+
+@keyframes animate-content-out {
+    from {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+
+    to {
+        transform: translate(-1%, -1%);
+        opacity: 0;
+    }
+}
+
+@keyframes animate-content-in {
+    from {
+        transform: translate(1%, 1%);
+        opacity: 0;
+    }
+
+    to {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+::view-transition-old(main-content) {
+    animation: 0.1s ease-out both animate-content-out;
+}
+
+::view-transition-new(main-content) {
+    animation: 0.1s ease-out both animate-content-in;
+}
\ No newline at end of file