How can I create close transitions to Dialog?

[Klynger]

I'm trying to create a close transition to the Dialog, but I can't find how it should be done. I noticed that even the demo example in the documentation doesn't have an animation when closing the dialog. I know this thing works because I tested your storybook.

I edited the codesandbox from the documentation with the changes I thought would be this work. Could you tell me what is wrong?

https://codesandbox.io/s/recursing-liskov-py39ii?file=/App.js:1488-1601

[andy-hook]

@Klynger You need to provide an additional exit animation in your data-state="closed" block which is the inverse of your "show"

https://codesandbox.io/s/dialog-animate-out-qr401v?file=/App.js

[Klynger]

Hey, @andy-hook . Thank you for the answer, but your solution doesn't work if I wrap the content in a DialogPrimitive.Portal. Is that expected?

[andy-hook]

I'm not sure I follow, that example is already using DialogPrimitive.Portal inside the Content component and it appears to work fine.

It sounds like you might be using portal twice in your case, perhaps double check there.

[Klynger]

Ok, that was a problem. But I'm trying to add a wrapper in the children of the portal to add a z-index, but when I do this, the animation stops working.

This is what I'm trying to do. Is that correct?

[andy-hook]

Overlay returns a node and accepts className so you can apply your z-index to it directly.

[benoitgrelard]

Yeah you can apply z-index directly to overlay and content.