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.
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.