Reactjs Showing Sidebar Menu with animation - css

Question

I need some insight pls.
I tried to build a sidebar menu with an animation that will show from left -100% to 100% fullscreen when state is true and close from 100% fullscreen to left -100% when the state is false.
The animation works when the state is true but the animation doesn't work when closing the sidebar menu.
Btw if there's a better approach for this pattern please let me know. Thank you in advance !
const PhoneNavigation = ({ handleClose, open }) => {
return (
<nav className={open ? "show_side_bar" : "close_side_bar"}>
<span onClick={handleClose}>X</span>
<ul>
<li className="subMenu navItem">
Courses
</li>
<li className="navItem">
Pricing
</li>
<li className="navItem">
Mission
</li>
<li className="subMenu navItem">
About us
</li>
</ul>
</nav>
);
};
export default PhoneNavigation;
// STYLING SHEET
.show_side_bar {
position: fixed;
background-color: brown;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
animation: showMenu 2s;
}
.close_side_bar {
animation: showMenu 2s reverse;
}
#keyframes showMenu {
from {
left: -100%;
}
to {
left: 0%;
}
}

Answer 1

This will not work on closing the sidebar because animations are applied only on the entry of an element. Instead, you can use transition like this :
const PhoneNavigation = ({ handleClose, open }) => {
return (
// when open is true, there will be an additional class show_side_bar
<nav className={open ? "show_side_bar side_bar" : "side_bar"}>
<span onClick={handleClose}>X</span>
<ul>
<li className="subMenu navItem">
Courses
</li>
<li className="navItem">
Pricing
</li>
<li className="navItem">
Mission
</li>
<li className="subMenu navItem">
About us
</li>
</ul>
</nav>
);
};
export default PhoneNavigation;
And the following CSS will make it work :
.side_bar {
position: fixed;
background-color: brown;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
// transition applies to every render, i.e., adding and removing any class from
// the element
transition : all 2s ease;
// place it initially at -100%
transform : translate(-100%);
}
.show_side_bar {
// when this class is active, sidebar will be visible
transform : translate(0);
}