Transition: Exit Before Enter

[RXminuS]

It would be really neat if you could create a "sequenced transition" between two components where first the item exits and then the next one enters. Maybe this could be done by allowing a transitionKey prop (should be different from key) where you can send any string and if it changes then it will first exit itself before entering itself again even though shown stays unchanged?

Or maybe the show prop not only allows for a boolean but also any string that has the same behaviour?

[chipit24]

💯 This is a common use-case. I brought in Headless UI thinking this would be possible, and I set something up like this:
CodeSandbox link: https://codesandbox.io/s/headless-ui-transition-between-components-6ur16?file=/src/App.tsx

<Transition
  show={showComponent1}
  afterLeave={() => setShowComponent2(true)}
>
  <p>This is component 1!</p>
  <button type="button" onClick={() => setShowComponent1(false)}>
    Show Component 2
  </button>
</Transition>

<Transition
  show={showComponent2}
  afterLeave={() => setShowComponent1(true)}
>
  <p>This is component 2!</p>
  <button type="button" onClick={() => setShowComponent2(false)}>
    Show Component 1
  </button>
</Transition>

However, this causes a layout shift, and there's no guarantee that the states of the two Transition components will be synchronized. It seems like this is possible with Vue's <transition> component: tailwindlabs/tailwindcss#3062.

[beakerandjake]

Here is what I settled on that's very similar to your solution. It's not as elegant or re-usable as the solution provided by @dcastil, but it works well for a one off.

const ExampleSwitch = () => {
    const [open, setOpen] = useState(false);
    const [openTransitionFinished, setOpenTransitionFinished] = useState(true);
    const [closedTransitionFinished, setClosedTransitionFinished] = useState(true);

    return (
        <>
            <button onClick={() => setOpen(!open)}>Click Me</button>

            {/* Closed State */}
            <Transition
                show={!open && openTransitionFinished}
                beforeEnter={() => setClosedTransitionFinished(false)}
                enter="transition-all duration-500"
                enterFrom="opacity-0 scale-75"
                enterTo="opacity-100 scale-100"
                afterLeave={() => setClosedTransitionFinished(true)}
            >
                Closed!
            </Transition>
            {/* Open State */}
            <Transition
                show={open && closedTransitionFinished}
                beforeEnter={() => setOpenTransitionFinished(false)}
                enter="transition-all duration-500"
                enterFrom="opacity-0 scale-75"
                enterTo="opacity-100 scale-100"
                afterLeave={() => setOpenTransitionFinished(true)}
            >
                Open!
            </Transition>
        </>
    );
}

[dcastil]

I've built a SwitchTransition based on HeadlessUI some time ago which I'm using at work in production. You can check out the code and demo here: https://codesandbox.io/s/headless-ui-switch-transition-vkohn?file=/src/app.tsx

Feel free to use it in your own projects! I'll propose to add it to HeadlessUI after the Tailwind CSS v3 release.

---

Edit: Here comes the proposal

SwitchTransition component

Headless UI has a Transition component which works really well for showing and hiding things, but it isn't suited for transitioning from one element to another. For this, a different kind of transition is needed, usually it's called SwitchTransition (here is the SwitchTransition from React Transition Group).

Moreover, I observed that none of the usual transition libraries handle switch transitions based on user input very well. With that I mean that the user might trigger another transition while a transition is currently ongoing. In the code example of React Transition Group the transition gets abruptly interrupted when I trigger another transition while the previous one is ongoing.

I built a prototype of a SwitchTransition for Headless UI which serves two main goals:

1. Component to transition between elements for Headless UI, based on the already existing Transition component.
2. Handle the case of more than two transition states explicitly and gracefully. There should be no transition behavior that a user wouldn't expect.

This SwitchTransition component is already used in multiple projects in production for a couple months and works fine there.

I'm happy to build a production version of this component and integrate it into Headless UI. The question here is whether the maintainers of Headless UI are interested in such a component as this will probably increase the maintenance surface for the project.

[dcastil]

Hey @RobinMalfait what do you think about the SwitchTransition component I proposed here? Would love to know whether you're interested in something like this.

[dominicarrojado]

Thanks @dcastil I need this one. Any news if we could have this integration with the library?

[dcastil]

Hey! I didn't receive a response yet, so it probably won't land in Headless UI. But you can copy the code from the prototype I built here: https://codesandbox.io/s/headless-ui-switch-transition-vkohn