汉堡侧边栏隐藏在React.js和sass / css中的过渡

Question

我在这里遗漏了一些东西......我觉得这很容易，但由于某种原因，我无法解决这个问题。

我正在尝试从页面右侧打开和关闭侧边栏。当然，在开始时你看不到它，然后点击（到汉堡）它出现，然后再次点击（在汉堡包上）它应该消失。一切顺利过渡。我可以做第一个（它显示得很好），第二个 - 它消失但没有过渡，我无法解决。我正在使用onClick事件切换两个类：

<div className="hamburgerContainer">
     <button onClick={() => this.handleHam()} className={hamClass}  type="button">
           <span className="hamburger-box hamburgerContainers">
            <span className="hamburger-inner"></span>
           </span>
     </button>
</div> 

切换hamburgerClass，hamClass在这里并不重要：

handleHam() {
    const { hamClass, hamburgerClass } = this.state;
    hamClass === 'hamburger hamburger--spin' && hamburgerClass === 'hamburgerMenuClose' ? 
    this.setState({ hamClass: 'hamburger hamburger--spin is-active', hamburgerClass: "hamburgerMenu" }):
    this.setState({ hamClass: 'hamburger hamburger--spin', hamburgerClass: 'hamburgerMenuClose' })
}

我的sass文件：

@media (max-width: 750px){
    .hamburgerMenu {
        position: absolute;
        width: 300px;
        right: -300px; 
        -webkit-font-smoothing: antialiased;
        transform: translate(-100%, 0); 
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }
    .hamburgerMenuClose {
        position: absolute;
        width: 300px;
        right: 0px;
        -webkit-font-smoothing: antialiased;
        transform: translate(0, 0); 
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
    }


}