How to add animation in sidedrawer in reactjs - css

Question

I want to add animation to the sidedrawer I made in reactjs. And I am not sure how to do that should i use react transition group or anything else which would be good ?
sidedrawer.js
import React from 'react'
import './sidedrawer.scss'
export default function SideDrawer() {
return (
<aside className="menu is-dark sidedrawer__wrapper">
<ul className="menu-list">
<li><a>Home</a></li>
<li><a>Contact</a></li>
<li><a>About</a></li>
</ul>
</aside>
)
}
sidedrawer.scss
.sidedrawer__wrapper{
background-color: #363636;
right: 0;
width: 80%;
height: 100%;
top: 0;
box-shadow: 1px 0px 7px rgba(0, 0, 0, 0.5);
position: fixed;
overflow-y: hidden;
z-index: 200;
.menu-list {
padding: 5rem 2rem 0rem 3rem;
li {
padding-top: 2rem;
a {
text-decoration: none;
color: white;
font-size: 30px;
}
}
}
}
navbar.js
import React,{Component} from 'react'
import './navbar.scss';
import Backdrop from './backdrop/backdrop';
import SideDrawer from './sidedrawer/sidedrawer';
class Navbar extends Component {
render() {
let backdrop;
let sidedrawer;
if(this.props.sideDrawerOpen) {
backdrop = <Backdrop click={this.props.backdropClickHandler}/>
sidedrawer= <SideDrawer/>
}
return (
<nav style={{width: '85%', margin:'0 auto'}} className="navbar is-dark" role="navigation" aria-label="main navigation">
<div className="navbar-brand">
<a className="navbar-item" href="/">ADI</a>
<a onClick={this.props.drawerToggleClickHandler} role="button" className="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div className="navbar-menu">
<div className="navbar-end">
HOME
CONTACT
ABOUT
</div>
</div>
{sidedrawer}
{backdrop}
</nav>
)
}
}
export default Navbar
In navbar.js there is hamburger icon which activate the side drawer. Here i want to add animation to the component when it will appear.

Answer 1

The simplest way is to just do that by setting the original margin to -sidedrawerwidth and adding a CSS class on state-change when you click the icon. And giving it {transition: margin transition-time}.