onAnimationEnd for exit transitions on Dialog

[UltraWelfare]

On an SSR environment using Remix, using Modal Routes poses 2 problems:

The first is having the dialog set to open = true, which causes a hydration error but this is tracked radix-ui/primitives#1386 and can easily be solved using a useEffect to only trigger it clientside.

The second one is the animation that happens when the modal is exiting. The routes are:
/list
/list/create (this is the modal with open={true} which is nested under /list)

You can catch when the user wants to close the modal and navigate to /list from /list/create but this instantly unmounts the modal leaving no breathing room for the animation to happen.
A solution is to "setTimeout" the navigation to happen after the animation is finished (remix-run/remix#4092) however that isn't a really clean way of doing it.

A ""perfect"" solution in my opinion would be to have a callback on when the exit animation ends and then trigger the navigate this way.
I've tried placing onAnimationEnd on <DialogContent> however it only fires for the opening animation of the model, not when the closing happens.

Is there any kind of way to grab the exit animation ending?

[glassworks-projects]

+1! don't have this exact problem, but also want to detect onAnimationEnd for a Command component so i can change the order of items in the Command when it's (fully) closed.

[akomm]

This is why I've abstracted it away, by simply having a "onCloseRequest" and "onClosed". The "onCloseRequest" is called first, with the option to reject and "onClosed" is actually fired, when the animation is finished.

Though this is not perfect solution. For example when you server-side redirect after submission, it remains unaffected.

The perfect solution are actually viewTransitions between page-navigations. Because they do not care about the method of how you navigate. Server-side redirect or client-side navigation.