我為自己的主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%;
}

當我自己的程序中有狀態變化時，我會觸發。可見的CSS類。 但是它不起作用。

查看我的React部分:

import React, { useContext } from "react";
import styles from "../../sass/DownModal.module.scss";
import { ConfigContext } from "../../context/config";
import { EnumPageFrom } from "../../business/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 {
  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}

我把剪報分成了幾個部分，但轉換仍然不起作用。

有一些潛在的問題可能會導致。未按預期應用可見類:

確保activeMenu變量設置正確 activeMenu的價值是您所期望的 想要。要應用的可見類。您可以通過添加以下內容來檢查這一點 一個控制臺日志，打印出不同的活動菜單的值 代碼中的點。 確保React組件中的樣式對象包含 的正確類名。主和。可見類。你可以 通過檢查調試器中的樣式對象或 添加控制臺日志以打印出對象。 確保。可見類在您的 CSS。確保高度屬性設置為一個值 大于0，并確保設置了轉換屬性 沒錯。您可以嘗試添加不同的屬性(如顏色或 字體大小)添加到?？梢婎?，并查看它是否作為 希望有助于縮小問題范圍。