如何在添加新内容时顺利展开div

Question

如何使div在添加内容时顺利展开?

const [render, setRender] = useState(false)
const showHide= () => {
setRender(!render)
}
return (
<div className="container">
<h1>TEST CONTAINER</h1>
{render && <Paragprah />}
<button type="button" class="btn btn-primary" onClick={showHide}>Primary</button>
</div>
);
}

CSS

.container {
margin-left: 30%;
margin-top: 10%;
width: 500px;
height: auto;
background-color: whitesmoke;
}

在上面的例子中，当一个按钮被点击时，一个组件被呈现，当新的内容被添加到div中时，它会立即展开。基本上，我希望它在添加内容时能够顺利扩展。这里也有一个视频，我的意思是当它瞬间膨胀。

设置一个固定的高度不会在我的情况下工作，因为正在加载的内容是动态的，它来自一个API和长度是不同的每次。所以设置一个固定的高度有时会使内容溢出。我需要一种方式，过渡可以顺利发生，高度仍然大到足以适合内容，这可能需要' ' ' height: auto; ' '要存在?

Imgur视频链接

Answer 1

你可以使用transition CSS属性来实现平滑过渡。

transition: height 2s;

点击链接查看。

Answer 2

这里我更新了代码。由于正在加载的内容具有动态大小，因此您必须使用useRefhook跟踪该内容大小，并将其存储在变量中，并将其与组件一起导出。

import { useRef, useEffect} from "react";
var ParagraphHeight;
function Paragraph() {
const ref = useRef(null);
useEffect(() => {
//when you content is loaded store its height
ParagraphHeight = ref.current.offsetHeight;
}, []);
return (
<div ref={ref}>
<p>Your content here for exemple...</p>
</div>
);
}
export { Paragraph, ParagraphHeight };

现在导入段落组件并将其放入.wrapperdiv中，该div的默认高度为0px(这意味着你的段落将被隐藏)，当你点击按钮时，它的高度将变为段落高度

import { useState } from "react";
import { Paragraph, ParagraphHeight } from "./Paragraph.js";
export default function App() {
const [isopned, setisopned] = useState(false);
const [wrapperHeight, setWH] = useState(0);
const showHide = () => {
if (!isopned) setWH(ParagraphHeight);
else setWH(0);
setisopned(!isopned);
};
return (
<div className="container">
<h1>TEST CONTAINER</h1>
<div className="wrapper" style={{ height: wrapperHeight }}>
<Paragraph />
</div>
<button type="button" className="btn btn-primary" onClick={showHide}>
Primary
</button>
</div>
);
}

最后不要忘记更新你的css，添加overflow-y隐藏和css过渡来平滑地展开你的包装器div。

.container {
margin-left: 30%;
margin-top: 10%;
width: 500px;
background-color: whitesmoke;
}
.wrapper {
display: grid; /*to prevent some problem caused by overflow hidden*/
transition: height 1s linear;
background-color: wheat;
overflow-y: hidden;
}

这是一个实时示例演示