Reach-ui: [Dialog] Modal animation

[VladSez]

❓Question

How can i animate unmount of Dialog component? I know about react-spring in the docs, but i want to use more lightweight solution

I was trying to animate it like this:
https://codesandbox.io/s/csstransition-component-mi7p3?file=/index.js
but, no luck

https://dev.to/michalczaplinski/super-easy-react-mount-unmount-animations-with-hooks-4foj

[chaance]

Animating components as they unmount without hacking around the rendering logic is tricky indeed, that's why we typically recommend tools like react-spring that handle that for you. I haven't done this myself but I'll leave the issue open in case anyone else wants to weigh in with alternate methods.

[raunofreiberg]

I have worked on this! Here's an example with react-spring.

I think you're better off using something like react-spring or framer-motion which does the heavylifting and nastyness such as deferred unmounting for ya. They don't weight _that_ much in my experience. react-spring is just ~10kB minified and gzipped, and it can satisfy all of your animation needs!

[VladSez]

@chancestrickland @raunofreiberg what do you think about this? https://codesandbox.io/s/usedelayunmount-custom-hook-lenni?file=/src/index.tsx