Create top-down slide animation using `Transition` from `@headlessui/react` using Tailwind CSS

Question

I want to create the following effect:

Currently, I have this weird effect:

I am using Transition from @headlessui/react.

My code looks like:

<Transition
    show={app.theme !== 'light'}
    enter="transition ease duration-700 transform"
    enterFrom="opacity-0 -translate-y-full"
    enterTo="opacity-100 translate-y-0"
    leave="transition ease duration-1000 transform"
    leaveFrom="opacity-100 translate-y-0"
    leaveTo="opacity-0 -translate-y-full"
>

How do I achieve it?

Answer 1

I solved it. It doesn't show the animation on Codesandbox as Tailwind animations don't work on Codesandbox (it is their bug) but the code is tested locally & it works fine.

{theme.type !== "light" && theme.color !== null && (
    <div
        className={`mt-4 mx-2 flex items-center space-x-2 transition-all ease-out duration-700 h-10 ${
            isDarkTheme ? "opacity-100" : "opacity-0"
        }`}
    >
        <label className="flex items-center justify-between w-1/2 h-full px-4 py-6 text-lg font-medium leading-4 text-gray-400 border-2 border-gray-800 bg-gray-800 rounded-md cursor-pointer">
            <span>Dim</span>
            <input
                type="radio"
                name="darkOption"
                className="w-4 h-4"
                value="dim"
                checked={theme.color === "dim"}
                onChange={() => {
                    updateTheme({
                        color: "dim",
                    })
                }}
            />
        </label>
        <label className="flex items-center justify-between w-1/2 h-full px-4 py-6 text-lg font-medium leading-4 text-gray-400 border-2 border-gray-800 rounded-md cursor-pointer bg-black">
            <span>Lights Out</span>
            <input
                type="radio"
                name="darkOption"
                className="w-4 h-4"
                value="lights-out"
                checked={theme.color === "lights-out"}
                onChange={() => {
                    updateTheme({
                        color: "lights-out",
                    })
                }}
            />
        </label>
    </div>
)}

Codesandbox → https://codesandbox.io/s/headless-ui-theme-animated-cbft1