How to add animation to the same element separately in css? - html

Question

I have a div and I want to apply animation to it.
When Clicked on hamburger icon
When I click on the hamburger menu, it should appear from left to right and it does correctly.
Here it appears like this, with left to right animation
When clicked on left icon
Now When after it appears to the screen, when I click to the leftIcon, it should disappear from right to left.
However, I manage to make the first animation appearing from left to right but I don't know how to add another animation to the same div when the left Icon is pressed.
Code
import React, { useState } from "react";
import { FaBars, FaArrowLeft } from "react-icons/fa";
import "./Sidebar.css";
function Sidebar() {
const [sidebar, setSidebar] = useState(false);
const showHideSidebar = () => {
return setSidebar(!sidebar);
};
return (
<div className="side__bar">
<div className="top__side__bar">
<div className="the__icon" onClick={showHideSidebar}>
<FaBars></FaBars>
</div>
<div className="the__bar__title">DASA</div>
</div>
{sidebar ? (
<div>
<TheSideBar></TheSideBar>
</div>
) : (
<></>
)}
</div>
);
function TheSideBar() {
return (
<div className="the__side__bar">
<div className="left__side__bar">
<div className="the__bar__title">DASA</div>
<div className="the__icon">
<FaArrowLeft onClick={showHideSidebar}></FaArrowLeft>
</div>
</div>
</div>
);
}
}
export default Sidebar;
css
.the__side__bar {
height: 100vh;
-webkit-box-shadow: 0 0 10px rgb(187, 183, 183);
box-shadow: 0 0 10px rgb(187, 183, 183);
width: 300px;
background-color: white;
position: absolute;
animation: mymove 1s;
animation-direction: alternate;
top: 0;
left: 0;
}
#keyframes mymove {
from {
left: -300px;
}
to {
left: 0px;
}
}
How to do that?

Answer 1

You can Add Class with body then you can control sidebar part using css.
const openMenu = () => {
document.body.classList.toggle('sidebar-open');
};
const closeMenu = () => {
document.body.classList.toggle('sidebar-open');
};
CSS
.sidebar {
position: fixed;
width: 300px;
background-color: white;
left: -100%;
top: 0px;
bottom: 0px;
transition: 0.3s ease-in-out 0s;
overflow: auto;
z-index: 9999;
}
.sidebar-open .sidebar {left: 0px;}

Answer 2

When you click on the menu menu items only change the css class.
function toggleMenu() {
$('.spanPos1').toggleClass('rotA45Top');
$('.spanPos3').toggleClass('rotA45Bottom');
$('.sideMenu').toggleClass('showMenu');
$('.btnMenu').toggleClass('btnMenu_Move');
}
* {
padding: 0;
margin: 0;
}
.header {
width: 100%;
background-color: #DDD;
padding: 10px;
}
.sideMenu {
height: 100vh;
-webkit-box-shadow: 0 0 10px rgb(187, 183, 183);
box-shadow: 0 0 10px rgb(187, 183, 183);
width: 300px;
background-color: white;
position: absolute;
transition: all .5s;
top: 0;
left: -300px;
}
.spanLine {
height: 3px;
background-color: #000;
width: 30px;
position: absolute;
transition: all .5s;
}
.spanPos1 {
top: 0px;
left: 0px;
}
.spanPos2 {
top: 10px;
left: 0px;
}
.spanPos3 {
top: 20px;
left: 0px;
}
.btnMenu {
position: relative;
width: 30px;
height: 24px;
background: transparent;
border: none;
transition: all .5s;
}
.rotA45Top {
margin-top: 3px;
transform: rotate(-45deg);
width: 20px;
left: -5px;
}
.rotA45Bottom {
margin-top: -3px;
transform: rotate(45deg);
width: 20px;
left: -5px;
}
.showMenu {
left: 0;
}
.btnMenu_Move {
z-index: 2;
margin-left: 250px;
}
<div class="header">
<div class="btnMenu" onclick="toggleMenu()">
<span class="spanLine spanPos1"></span>
<span class="spanLine spanPos2"></span>
<span class="spanLine spanPos3"></span>
</div>
</div>
<div class="sideMenu"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>