动态追加类时，CSS 转换无法正常工作

Question

我为自己的主 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}

我将片段分成一些部分，但过渡仍然不起作用。

Answer 1

有一些潜在的问题可能会导致 .visible 类无法按预期应用：

1. 确保正确设置了 activeMenu 变量，并且当您希望应用 .visible 类时，activeMenu 的值是您期望的值。 您可以通过添加控制台日志来检查这一点，以在代码的不同位置打印出 activeMenu 的值。
2. 确保 React 组件中的样式对象包含 .main 和 .visible 类的正确类名。 您可以通过检查调试器中的样式对象或通过添加控制台日志来打印对象来检查这一点。
3. 确保在您的 CSS 中正确定义了 .visible 类。 确保将 height 属性设置为大于 0 的值，并确保正确设置了 transition 属性。 您可以尝试向 .visible 类添加不同的属性（例如颜色或字体大小），看看它是否按预期应用以帮助缩小问题范围。