I've built a modal/dialog component using React and Tailwind. Here is a codesandbox with my problem.
Now I would like to show and hide the modal with a nice animation like this one here.
I've tried creating this using the react-transition-group package.
My problem
Currently I have only managed to get it to work on entering the dom BUT that is while wrapping the entire Confirm.jsx component. This is not ideal because that would mean that everytime I want to use the Confirm.jsx somewhere in my app, I also have to wrap it with the <CSSTransition> component.
So Ideally, I want to add the <CSSTransition> component either in Confirm.jsx or Dialog.jsx but whatever I try, I cannot get these to work.
What am I missing here?
Here is the little change I've made.
I moved CSSTransition to your Confirm component and removed the early returns in Confirm and Dialog when open state is false
You were returning nothing when open state is set to null. This was canceling your exit animation. CSSTransition needs to have someting to render so that it can add exit animation classes while exiting. After the animation is complete, CSSTransition removes the childtren from the DOM as you have already set the unmountOnExit property