I'm trying to make a Modal which will display a few slides in a carousel-style component, and just make some simple enter/exit animations on slide change. I'm using the useTransition hook from react-spring, and the problem is that when a transition occurs, there are a few moments where the outgoing slide (which is fading out) and incoming slide (which is fading in) are both in the modal. This causes rendering issues where the height is doubled because the same width needs to be shared by the two slides.
Here is a code sandbox demonstrating the issue
I've tried following some guides online but unfortunately they seem to work with an older version of react-spring where the return value of the hook differed.
I have also tried changing the styling of the containing div to position: absolute so that it will allow overlapping components, but then the modal does not have the correct height and width dimensions to properly display the content. To try to get around this, I've tried
useEffect hook, then updating the state dimsThis sort of gives the effect that I want, but has two major problems - computed height doesn't seem to update properly and this doesn't respond to change in viewport. It feels like bad responsive design, despite kinda doing what I want. Here's a sandbox with this workaround.
I'm not very strong with css and I feel like there is something elegant that can solve this, would be much appreciated if y'all have any thoughts 🤞🙏
I've encountered the same issue. with a simple enter/exit transition.
solved it with the exitBeforeEnter: true property:
Ensures any items leaving animate out before the new items animate in
I noticed that it is a relatively new addition to the library (since version 9.4.0).
fixed your sandbox in this fork.