我为自己的主div编写了一个CSS：

.main {
  height: 0%;
  position: absolute;
  width: 100%;
  z-index: 100;
  background: whitesmoke;
  bottom: 0;
  border-radius: 15px;
  padding: 20px;
  color: gray;
  left: 0;
  right: 0;
  transition: height 1s ease-in;
}

.visible {
  height: 96%;
}

当我自己的程序中的一些状态改变时，我会触发。visible CSS类。但是它不起作用。
查看我的React部分：

import React, { useContext } from "react";
import styles from "../../sass/DownModal.module.scss";
import { ConfigContext } from "../../context/config";
import { EnumPageFrom } from "../../bussiness/Icon";

function Index({ children }: { children: React.ReactNode }) {
  const { setActiveMenu, setBackground, activeMenu } =
    useContext(ConfigContext);
  return (
    <div
      className={`${styles.main} ${
        activeMenu == EnumPageFrom.MenuAdd && styles.visible
      }`}
    >
      {children}
    </div>
  );
}

export default Index;

除了CSS（.visible）类之外，所有的东西都工作正常！
为什么和我怎样才能适合它？
编辑

.visible {
  height: 96%;
}
.hidden {
  height: 0%;
}
.main {
  position: absolute;
  width: 100%;
  z-index: 100;
  background: whitesmoke;
  bottom: 0;
  border-radius: 15px;
  padding: 20px;
  color: gray;
  left: 0;
  right: 0;
  transition: height 4s;
}

<div
      className={`${styles.main} ${
        activeMenu == EnumPageFrom.MenuAdd ? styles.visible : styles.hidden
      }`}
    >
      {children}

我把一个片段分成几个部分，但过渡仍然不起作用。