React动态切换CSS类时height Transition不生效问题求助

问题场景 #

为自定义main元素编写CSS并设置height属性的transition过渡效果，在React组件中根据activeMenu状态动态切换.visible和.hidden类以改变height，但调整代码结构后过渡效果仍未生效。

相关代码 #

初始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%;
}

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;

修改后代码

.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}
</div>

原因分析 #

• padding干扰实际高度：.main设置了padding:20px，默认盒模型下height不包含padding，导致height:0%时元素实际高度为40px（上下padding之和），过渡效果被掩盖。
• 未设置overflow:hidden：当height为0时，子元素内容溢出，元素高度被内容撑开，此时height属性的设置失效，过渡无法触发。
• 类名切换逻辑隐患：使用==非严格相等判断，可能因类型不匹配导致类名切换失败，无法触发状态变化。

解决办法 #

1. 调整盒模型并添加overflow控制 #

修改CSS，使用box-sizing:border-box让height包含padding，同时添加overflow:hidden确保元素高度由height属性控制：

.main {
  box-sizing: border-box;
  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;
  overflow: hidden;
}

.hidden {
  height: 0%;
}

.visible {
  height: 96%;
}

2. 修正React类名判断逻辑 #

使用严格相等===避免类型匹配问题，确保类名正确切换：

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

3. 验证CSS类优先级 #

由于使用SCSS模块，类名会被哈希处理，确保.visible和.hidden的height规则能正确覆盖.main中的设置（同权重类名后定义的会生效）。

内容的提问来源于stack exchange，提问作者user18209107