[FIXED] How to animate an element as it leaves a page?

Issue

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.

Solution

You should use state variable to change className, for example,

import React, {useState} from 'react';

function index() {
  const [slideEffect, setSlideEffect] = useState(false);
  const slide = () => setSlideEffect(!slideEffect);

  return <div className=slideEffect?"slideRight":"slideLeft">Element</div>;
}

export default index;

Also you can use animate css https://animate.style/ install it via npm,

npm install animate.css --save

and change the code I wrote like this

return <div className={`animate__animated ${slideEffect? "animate__fadeOutRight":"animate__fadeInRight"}`}>Element</div>;

Answered By - yusuf_sabri

Answer Checked By - Senaida (PHPFixing Volunteer)