Trying to add an exit animation to the dialog using tailwind

[Murkrage]

Heya! I'm trying to add enter and exit animations to my dialog. The enter animation works but the exit animation doesn't as the component seems to be unmounted right away. I would have expected it to defer unmount but it doesn't seem to do so.

Here's my code:

<Dialog.Root>
    <Dialog.Trigger asChild>
        <button className="bg-red-500">Open dialog</button>
    </Dialog.Trigger>
    <Dialog.Portal>
        <div className="fixed inset-0 isolate z-50 flex items-center justify-center">
            <Dialog.Overlay className="DialogOverlay fixed inset-0 bg-gray-900/30" />
            <Dialog.Content className="DialogContent fixed inset-0 top-8 z-50 overflow-hidden rounded-t-3xl bg-white">
                <p>This is the content</p>
            </Dialog.Content>
        </div>
    </Dialog.Portal>
</Dialog.Root>

The DialogOverlay and DialogContent class names are straight from the documentation over at https://www.radix-ui.com/docs/primitives/overview/animation#animating-with-css-animation. The animations have also been added to a global css file.

I'm not sure if I'm doing anything wrong on my end.

[joaom00]

Hi @Murkrage, here an example on how to add exit animation to dialog

https://codesandbox.io/p/sandbox/pedantic-aryabhata-1ykgmk

[kylemh]

Hey @joaom00

If I tweak the overlay to use utility classes it doesn't work. https://codesandbox.io/p/sandbox/pedantic-aryabhata-1ykgmk?file=%2FApp.jsx

Is it a requirement to define every animation we make within tailwind.config and leverage the animate- utility?

[joaom00]

Yes, Radix only supports CSS animations out of the box, so this data-[state=closed]:opacity-0 will not work

[kylemh]

just a heads up, @joaom00 - Sandbox seems to have ruined your link 😭

[joaom00]

Thanks @kylemh, link updated! 🫡

[Murkrage]

Thanks @joaom00. I had the code setup exactly as your example but I did figure out an issue on my end! The wrapping div inside the Dialog.Portal was messing Radix' automatic behaviour. Thank you for the example and helping me figure out my mistake 😄