pavel444-byte
9c314ecb4e
All checks were successful
Deploy MineGeo to Dokploy / deploy (push) Successful in 12m17s
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useRef } from "react";
|
|
import { usePathname, useSearchParams } from "next/navigation";
|
|
|
|
/** Animate the new content after browser history navigation, without delaying it. */
|
|
export function BackNavigationTransition() {
|
|
const pathname = usePathname();
|
|
const search = useSearchParams();
|
|
const route = `${pathname}?${search.toString()}`;
|
|
const historyNavigation = useRef(false);
|
|
const previousPath = useRef(route);
|
|
|
|
useEffect(() => {
|
|
const onPopState = () => {
|
|
historyNavigation.current =
|
|
`${window.location.pathname}?${new URLSearchParams(window.location.search).toString()}` !==
|
|
previousPath.current;
|
|
};
|
|
window.addEventListener("popstate", onPopState);
|
|
return () => window.removeEventListener("popstate", onPopState);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
if (previousPath.current === route) return;
|
|
previousPath.current = route;
|
|
const fromHistory = historyNavigation.current;
|
|
historyNavigation.current = false;
|
|
if (
|
|
!fromHistory ||
|
|
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;
|
|
}
|