为什么CSS过渡无法在ReactJS中正确呈现？

问题描述

我做了一个简单的容器组件。在切换按钮上，按打开容器，然后再次按关闭容器。我在CSS中进行了过渡以对其进行动画处理（目前从0px增长到200px）。
问题是我的过渡不起作用（显示）。我不删除组件，只是更新它。我的容器上没有地图功能。

const ToggleButton = (props) => {
  return (
    <div className={classes.button} {...props}>
      {props.toggle ? (
        <ToggleLess className={classes.button_icon} />
      ) : (
        <ToggleMore className={classes.button_icon} />
      )}
    </div>
  );
};

const ToggleContainer = () => {
  const [toggle,setToggle] = useState(false);
  const handleClick = () => {
    setToggle(!toggle);
    console.log(toggle);
  };
  
  return (
    <div>
            <div className={`contents ${toggle ? "on" : ""}`}>
                <p>Hy</p>
            </div>
      <ToggleButton toggle={toggle && true} onClick={handleClick} />
    </div>
  );
};

export default ToggleContainer;

.contents {
  max-height: 0px;
  transition: all 1s ease-in;
    
}
.contents.on{
  min-height: 200px;
}

注意：和只是导入的svg文件。

我记录了不同的堆栈答案，但似乎无济于事。

解决方法

.contents{
    min-height: 0px;
    transition: all 1s ease-in;
    &.on{
        min-height: 200px;
    }
}

我必须设置所有非最小高度，以更具体地说明@Thomas所说的最小高度！=最大高度。