Как добавить анимацию в Sidedrawer в реагирующих

Question

Я хочу добавить анимацию в Sidedrawer, который я сделал в реагировании.И я не уверен, как это сделать, если я буду использовать реагирующую группу перехода или что-нибудь еще, что было бы хорошо?

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">
                    <a href="/" className="navbar-item">HOME</a>
                    <a href="/contact" className="navbar-item">CONTACT</a>
                    <a href="/about" className="navbar-item">ABOUT</a>
                </div>
                </div>
                {sidedrawer}
                {backdrop}
            </nav>
        )
    }
}

export default Navbar

В navbar.js есть значок гамбургера, который активирует боковой ящик.Здесь я хочу добавить анимацию к компоненту, когда он появится.

Answer 1

Самый простой способ - это просто сделать это, установив для исходного поля значение -sidedrawerwidth и добавив класс css для смены состояний при нажатии значка. И давая ему {transition: margin transition-time}