feat: add fade out animations and fast fade in

src/components/Layout.tsx

@@ -1,10 +1,13 @@
 import Navbar from "./Navbar";
+import Transition from "./Transition";
 
 export default function Layout({ children }: React.PropsWithChildren<{}>) {
 	return (
 		<div className="md:container md:px-0 mx-auto my-24 px-8 text-white text-xl">
 			<Navbar />
-			<main className="fade-in">{children}</main>
+			<main>
+				<Transition>{children}</Transition>
+			</main>
 		</div>
 	);
 }

src/components/Transition.tsx

@@ -0,0 +1,22 @@
+import { useEffect } from "preact/hooks";
+import { PropsWithChildren, useState } from "react";
+
+export default function Transition({ children }: PropsWithChildren<{}>) {
+	const [currentChild, setCurrentChild] = useState(children);
+
+	useEffect(() => {
+		if (currentChild === children) return;
+
+		const id = setTimeout(() => {
+			setCurrentChild(children);
+		}, 200);
+
+		return () => clearTimeout(id);
+	}, [children]);
+
+	return (
+		<div className={currentChild !== children ? "fade-out" : "fade-in"}>
+			{currentChild}
+		</div>
+	);
+}

src/styles/index.scss

@@ -55,25 +55,44 @@
 		}
 	}
 
+	.fade-out {
+		animation-name: fade-out;
+		animation-duration: 0.2s;
+		animation-fill-mode: both;
+		animation-timing-function: cubic-bezier(0.17, 0.64, 0.59, 0.96);
+	}
+
 	.fade-in > * {
-		animation-name: fade;
+		animation-name: fade-in;
 		animation-duration: 0.3s;
 		animation-fill-mode: both;
+		animation-timing-function: cubic-bezier(0.14, 0.64, 0.51, 0.94);
 	}
 
 	@for $i from 1 through 24 {
 		.fade-in > :nth-child(#{$i}) {
-			// animation-delay: #{$i / 10}s;
-			animation-delay: 0.2s;
+			animation-delay: #{$i / 20}s;
+			// animation-delay: 0.2s;
+		}
+	}
+
+	@keyframes fade-out {
+		from {
+			opacity: 1;
+			transform: translateY(0);
+		}
+		to {
+			opacity: 0;
+			transform: translateY(0.5rem);
 		}
 	}
 
-	@keyframes fade {
-		0% {
+	@keyframes fade-in {
+		from {
 			opacity: 0;
 			transform: translateY(0.5rem);
 		}
-		100% {
+		to {
 			opacity: 1;
 			transform: translateY(0);
 		}