I'm hoping for a bit of help here if possible. I'm developing a project in React and using TailwindCSS and HeadlessUI for transitions. Is it possible to use HeadlessUI transitions with route? I cannot get a component to transition out when loading the next component with route. I basically have a page appear from the right and fill the screen. Then when a button is clicked the page should disappear off to the left and the next page should load in from the right at the same time, the next page slightly overlapping the previous page as they both transition. I can do this quite easily using state changes etc but when it comes to wrapping the components in a route with a path I cannot for the life of me solve the puzzle. The enter transition works but the leave transition just will not work and the component vanishes. Presumably the component is unloaded before the leave transition gets to play. So how do I prevent the component from being unloaded until after the leave transition has played out?
<Route path="/Subtest1">
<Transition
appear={true}
show={true}
enter="transform duration-500"
enterFrom={"translate-x-full"}
enterTo="translate-x-0"
leave="transform duration-500"
leaveFrom="translate-x-0"
leaveTo={"filter brightness-50 -translate-x-1/2"}
as="div"
className={"absolute z-20 top-0 left-0 right-0 w-full h-full flex items-center justify-center"}
>
<Subtest1 />
</Transition>
</Route>
<Route path="/Subtest2">
<Transition
appear={true}
show={true}
enter="transform duration-500"
enterFrom={"translate-x-full"}
enterTo="translate-x-0"
leave="transform duration-500"
leaveFrom="translate-x-0"
leaveTo={"filter brightness-50 -translate-x-1/2"}
as="div"
className={"absolute z-20 top-0 left-0 right-0 w-full h-full flex items-center justify-center"}
>
<Subtest2 />
</Transition>
</Route>
I would really appreciate any help on this as it's been a very long week trying to solve these transitions. Can it actually be done?
Thanks in advance.