时间戳

首页 > 解决方案 > 为什么 CSS 过渡不会在 ReactJS 中正确呈现？

javascript - 为什么 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;
}

注意： and 只是一个导入的 svg 文件。

我记录了不同的堆栈答案，但似乎没有任何效果。

标签： javascriptreactjscss-transitions

解决方案

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

我必须设置所有不是最小高度，更具体地说，@Thomas 评论了什么，最小高度！=最大高度。

推荐阅读