Is it possible to animate page transitions in Next.js using Headless UI?

[runoncedev]

I'm trying to add page transitions in a Next.js app using Headless UI's <Transition> component but I can't get it work.

I tried something like this but it's not working, probably because it doesn't make much sense:

  const pathname = usePathname();
  const [show, setShow] = useState(false);

  useEffect(() => {
    if (pathname === "/") {
      setShow(false);
    } else {
      setShow(true);
    }
  }, [pathname]);

<Transition
  show={show}
  enter="transition-opacity duration-1000"
  enterFrom="opacity-0"
  enterTo="opacity-100"
  leave="transition-opacity duration-1000"
  leaveFrom="opacity-100"
  leaveTo="opacity-0"
>
  {children}
</Transition>

I was hoping to have a key prop like in Framer Motion.

Is there any way to achieve this with Headless UI?