ui: Support for exit animations on Dialogs, Menus,...

I’ve been using this component library for a couple of days now, LOVING IT!

The only part that’s missing is the exit animations, especially for the dialogs and menu components. They animate-in nicely but they disappear instantly on unmount. I’m somewhat new to radixUI, but I read this from radix which basically uses the data-[state=open/close] attributes to animate the state transitions (and this is what accordions seem to use on this library with animations declared on tw config)

So, is not having exit animations on certain components an intentional design choice?

About this issue

Original URL
State: closed
Created a year ago
Reactions: 5
Comments: 26 (4 by maintainers)

Commits related to this issue

feat(www): add exit animations see shadcn/ui#72 shadcn/ui#531 — committed to baumerdev/shadcn-ui by baumerdev a year ago
feat(www): add exit animations see shadcn/ui#72 shadcn/ui#531 — committed to baumerdev/shadcn-ui by baumerdev a year ago

Most upvoted comments

probably it would be nice to add exit animation on Sheet component

+26

its-monotype on Feb 10, 2023

We now have exit animations on all components.

+22

shadcn on Oct 21, 2023

I played a little bit with the code of shadcn/ui’s Dialog. The main problem seemed to be the <div> between DialogPrimitive.Portal and {children}:

const DialogPortal = ({
  className,
  children,
  ...props
}: DialogPrimitive.DialogPortalProps) => (
  <DialogPrimitive.Portal className={cn(className)} {...props}>
    <div className="fixed inset-0 z-50 flex items-end justify-center sm:items-center">
      {children}
    </div>
  </DialogPrimitive.Portal>
)
DialogPortal.displayName = DialogPrimitive.Portal.displayName

This causes Radix UI’s Portal to ignore animations on Overlay and Content and thus removing the Portal’s content immediately. Therefore none of the animation you might have added were visible because the elements weren’t longer part of the DOM.

In shadcn/ui#127 I removed the <div>. Problem now is that the positioning of the Overlay and Content relied on the parent div which used CSS’s flex. Now the components are directly in the DOM and we need to position them on their own with fixed. And because this positioning is a little bit more complex the animations needed to be as well.

The result should be visually the same with an additional exit animation.

+11

baumerdev on Mar 15, 2023

@its-monotype @sanvishal Using tailwind-animate seems to work for me

https://codesandbox.io/p/sandbox/busy-noether-9ew9u2?file=%2FApp.jsx

About the onAnimationEnd not firing on close, it’s a issue https://github.com/radix-ui/primitives/issues/1020

joaom00 on Feb 14, 2023

@sanvishal Some of the exit animations are intentionally not added.

Example: for alert dialog you want visual feedback (animation) when the dialog enters but you want it to “get it out of your way” when exit. (I tried adding exit animations and it felt weird/sluggish).

Some are probably oversight on my part. Can you let me know which components and I can fix?

Thank you.

shadcn on Feb 10, 2023

@its-monotype Yes, I updated the example with tailwind-animate to look like the one in tailwind.config

joaom00 on Feb 14, 2023

@AlvaroAquijeDiaz My PR hasn’t been merged to the code base yet and meanwhile the upstream code has changed. If I find time in the next days I can adjust my PR for the current master. But if it it’s urgent, the code changes in my PR/previous comment should still work if you change this in your code accordingly.

baumerdev on Jun 7, 2023

@joaom00 Wow, it’s strange, but I really tried it now and it works, I don’t even know what happened then, maybe a bug or blunted somewhere. Thankee! Also, you can revisit DialogOverlay animation in the example then, using that plugin like that: ‘data-[state=open]:animate-in data-[state=open]:fade-in’, ‘data-[state=closed]:animate-out data-[state=closed]:fade-out’

its-monotype on Feb 14, 2023