Can you use Tailwind HeadlessUI Transitions with route?

[cannon303]

Hi, I'm hoping for a bit of help here if possible. Is it possible to use the 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.

[cannon303]

As far as I can see the answer is no. I've tried everything and this question has remained unanswered. I went with react-spring instead which I really didn't want to have to do but I cannot spend any more time trying to get HeadlessUI to work in this instance.

[benrudolphWSP]

I've been trying to figure this out myself. You need something to intercept, perform the leave transition, then handle the route. So it can handle the transitions before the route occurs. I found the below post and hope to utilize it with headlessui transitions. He uses green sock for his page animations/transitions.

https://dutzi.party/animating-route-transitions-using-react-router/

[cannon303]

Hi did you get your issue resolved with that link? I'm on a new project and having the same issue only this time react-spring won't work either.

[brudolph]

Unfortunately I gave up due to deadlines. But still very interested in getting it working.

[runoncedev]

It would be awesome if we could use the key prop as an alternative to the show prop to animate route transitions, as in Framer Motion.

For example in something like Next.js:

<Transition
  key={route.path}
  enter="transition-opacity"
  enterFrom="opacity-0"
  enterTo="opacity-100"
  leave="transition-opacity"
  leaveFrom="opacity-100"
  leaveTo="opacity-0"
>
  <Component {...pageProps} />
</Transition>

So everytime route.path changes, the component gets re-mounted and animations kick in.