React bootstrap modal animate only on show OR on hide

user_954986 0
Viewed 161

I'm trying to have it so that I can go directly from one modal to another without flicker/animations for bootstrap Modals in react (using react-bootstrap), but it doesn't work because of the fade CSS class.

I'd like to set it so that the first modal a user opens animates, and the last one a user closes animates. So say I have 3 modals the user goes between:

1 => 2 => 3

Modal 1: fades in on open, no animation on close
Modal 2: no animation at all
Modal 3: no animation on open, fades out on close

How should I go about doing this? I've tried tinkering with the fade CSS class to no avail.

This feels like an anti-pattern, so maybe I don't really want to do this. What I'm trying to do is cleanly go from a Registration modal to an Account Setup modal, with it being seamless for the user.

bootstrap-5 react-bootstrap reactjs javascript
1 Answers

Just reuse the same Modal component: on submit of the first and second form change the content via props and on the last form submit call the close modal method.

user_59804130
Related