pavel444-byte
5898ef35a5
Some checks failed
Deploy MineGeo to Dokploy / deploy (push) Failing after 10m22s
35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
"use client";
|
|
|
|
import { useLayoutEffect, useRef } from "react";
|
|
import { usePathname, useSearchParams } from "next/navigation";
|
|
|
|
/** Animate newly committed pages without delaying navigation. */
|
|
export function BackNavigationTransition() {
|
|
const pathname = usePathname();
|
|
const search = useSearchParams();
|
|
// Documentation pages share a pathname; other query changes are filters or
|
|
// state updates and should not animate the entire page.
|
|
const route =
|
|
pathname === "/docs"
|
|
? `${pathname}?page=${search.get("page") ?? "welcome"}`
|
|
: pathname;
|
|
const previousPath = useRef(route);
|
|
|
|
useLayoutEffect(() => {
|
|
if (previousPath.current === route) return;
|
|
previousPath.current = route;
|
|
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
|
|
const main = document.getElementById("main-content");
|
|
if (!main || typeof main.animate !== "function") return;
|
|
const animation = main.animate(
|
|
[
|
|
{ opacity: 0.7, transform: "translateY(8px)" },
|
|
{ opacity: 1, transform: "translateY(0)" },
|
|
],
|
|
{ duration: 200, easing: "cubic-bezier(0.23, 1, 0.32, 1)" },
|
|
);
|
|
return () => animation.cancel();
|
|
}, [route]);
|
|
return null;
|
|
}
|