CODEWITHSUNDEEP
javascriptreactjsjsxreact-transition-group
Reinier68
Reinier68

Reputation: 3252

How to use React-Transition-Group to show and hide modal/dialog with animation?

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?

Upvotes: 0

Views: 1281

Answers (1)

semihlt
semihlt

Reputation: 154

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

Upvotes: 2

Related Questions