CSS не воспроизводит анимацию выхода - ReactJS и CSSModules

Question

Я на ReactJS с модулями CSS. В основном я нажимаю кнопку, и скрытая граница получает большую границу, чтобы получить анимацию окна, приближающегося к точке. Анимация (ввод анимации) в порядке, когда я нажимаю кнопку, чтобы вызвать изменение className, но когда я нажимаю ее снова, чтобы вызвать другое изменение className, анимация не воспроизводится. сос хаха

Привет, вот код:

.NavPage {
box-sizing: border-box;
position: fixed;
background: white;
border: red 50px solid;
width: 100vw;
height: 100vh;
top: -100%;
opacity: 0;
z-index: 1;
transition: all 400ms;
pointer-events: none;

}

.NavPageOpen {
position: fixed;
box-sizing: border-box;
border: red 300px solid;
background: none;
width: 100vw;
height: 100vh;
transition: all 400ms ;
pointer-events: all;
z-index: 1;
opacity: 1;

}

вот код реакции:

 let className = classes.NavPage

    export default class NavPage extends Component {
    state = {
    navPageOpen: false
  }
    openNavPage = () => {
    this.setState((prevState) => {
      return {navPageOpen: !prevState.navPageOpen};})
      if (this.state.navPageOpen) {
        className = classes.NavPageOpen
      } else {
        className = classes.NavPage
      }
    }

render() {
    return (
    <div className={classes.MenuButton}>
    <MenuButton clicked={this.openNavPage}/>
        <div className={className} onClick={this.props.clicked}>
          <NavPageButtons>home</NavPageButtons>
          <NavPageButtons>portfolio</NavPageButtons>
          <NavPageButtons>contact</NavPageButtons>
        </div>
    </div>