reactjsreact-spring

React-Spring Why doesn't the closing animation work?


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>
      )}
    </>
  );

Solution

  • 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