I am doing a modal window animation using spring version 8.0.27. The animation works when I open the window, it moves out from the bottom, but when I close the window it just disappears, there is no animation.
I watched the examples, the code is the same there, but they have animation when closing, I don't understand what my problem is, I did everything according to the documentation.
How do I make a smooth animation when closing? I thought the leave property affects this
const transitions = useTransition(show, null, {
from: { opacity: 0, transform: `translateY(100%)` },
enter: { opacity: 1, transform: `translateY(0%)` },
leave: { opacity: 0, transform: `translateY(100%)` },
});
return (
<>
{show && (
<ModalBackground>
{transitions.map(
({ item, key, props: style }) =>
item && (
<animated.div
style={style}
key={key}
>
<ModalContainer>
<ModalClose onClick={() => setShow((prev) => !prev)}>
<IoClose />
</ModalClose>
</ModalContainer>
</animated.div>
)
)}
</ModalBackground>
)}
</>
);
The problem was that when I closed the component was immediately unmounted and the animation did not have time to work. I just removed show &&
and everything worked fine