如果我添加 MOBX 变量，CSS 动画和过渡不起作用

如何解决如果我添加 MOBX 变量，CSS 动画和过渡不起作用

我最近添加了 if 语句，以便以一种或另一种方式显示我的按钮的内容。完成此添加后，一切正常，但我的菜单动画/过渡已损坏。

这是我的头类，mobileMenuState.isMenuVisible 变量正在工作，但正在以某种方式剪切动画。

header.jsx

import './styles.scss'
import { HamburgerOpenIcon,HamburgerClosedIcon } from 'src/Iconsgallery'
import mobileMenuState from './mobileMenuState'
import MobileMenu from '../MobileMenu'

@observer
class Header extends React.Component {
  constructor(props,context) {
    super(props)
    this.context = context
  }

  render() {
    return (
      <>
        <MobileMenu {...this.props} />
        <button 
          onClick={() => mobileMenuState.toggleMenuVisibility()} >
          {mobileMenuState.isMenuVisible ? ( // THI IS BREAKING CSS ANIMATION/TRANSITION
            <div>closed</div>
           ) : (
            <div>opened</div>
           )}
        </button>
      </>
    )
  }
}

MobileMenuState ：这个类正在处理变量

import { action,observable } from 'mobx'

class MobileMenuState {
  @observable isMenuVisible = false

  @action
  toggleMenuVisibility = () => {
    this.isMenuVisible = !this.isMenuVisible
  }
}

const mobileMenuState = new MobileMenuState()

export default mobileMenuState

MobileMenu ：该类呈现我的菜单并将 'open' 类添加到 <aside 块

import React from 'react'
import { observer } from 'mobx-react'
import { application } from 'src/utils'
import { mobileMenuState } from 'src/views/components/Header'
import './styles.scss'

@observer
class MobileMenu extends React.Component {
  render() {
    return (
      <>
        <div
          onClick={mobileMenuState.toggleMenuVisibility}
        />
        <aside
          className={`pancake ${
            mobileMenuState.isMenuVisible ? 'open' : 'closed'
          }`}
          >
          <ul>
            <li>some item here 1</li>
            <li>some item here 2</li>
          </ul>
         
        </aside>
      </>
    )
  }
}

export default MobileMenu

styles.scss ：这是我的 css 文件，如果我不使用 mobx toogled 变量就可以使用。

.pancake {
  transform: translateX(-100%) translateY(0);
  transition: transform 300ms ease-in-out;
 
  &.open {
    transform: translateX(0) translateY(0);
   }
  }
}

我该如何处理？我试过不使用 mobx 但结果相同，状态也在同一个 Header 类中，但仍然无法正常工作。黑暗中有光吗？