How to animate an element as it leaves a page?

Question

I am currently designing a menu that slides in on the right when you click the menu button, and I want it to slide out when you click the X.

so far I have the slide in animation down, so as soon as it renders, this animation occurs:

@keyframes slideInFromRight {
    0% {
      transform: translateX(50%);
    }
    100% {
      transform: translateX(0);
    }
}

is there any way for me to apply this animation (sliding out) to the div when the user hits X and the item is no longer rendered on the page:

@keyframes slideInFromRight {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(50%);
    }
}

Not sure if this has any relevance but, For the rendering of the menu, i am using the useState() react hook to decide when to render in the sidebar menu or not.