在我的react應用中，我正在做一些影片以使其更漂亮。我想讓一個div通過從上面滑動出現，通過向后滑動消失。
我在堆疊中使用bootstrap 5.1.0和react-bootstrap 1.6.1。
我想出了一個解決方案，就是將內容包裹在一個div中，并根據需要在window.innerHeight和0之間切換其maxHeight。我還添加了一個自定義的css類
.transitionheight{
transition: max-height 0.5s easy-inout;
}
問題是，很明顯，當我關閉DIV時，影片從一個非常高的maxHeight值開始，所以在關閉觸發事件和你看到DIV實際關閉的時刻之間有一個延遲。我使用了window.innerHeight，因為我沒有一個已知的高度目標值可以使用，它取決于div內容的長度。
我將代碼上傳到codesandbox，所以你可以看到它的行為。
我怎樣才能避免這種情況？
uj5u.com熱心網友回復：
在你的情況下，只需要用useRef獲取div的高度，當將show = true設定為當前高度。codesandbox exapmle
ApperDiv
const AppearDiv = （props）=> {
let { show = false, className = "", style = {}. } = props;
const ref = useRef(null)。
const getPaperBoxHeight = ref.current?.scrollHeight || 0;
const filteredProps = Object.entries（props）。
.filter(([k, _]/span>) => ! ["className", "show", "style"].includes（k）)
.reduce((p, [k, v]) => ({ ...p, [k]: v }), {}) 。
style = show ? { height: getPaperBoxHeight } : { height: getPaperBoxHeight }. : { height: 0 };
return (
<Div
ref={ref}
className={}
"overflow-hidden transition-height" (className && ` ${className}`)
}
style={style}
{...filteredProps}。
/>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/309226.html
標籤：
上一篇：<p><ahref="https://getbootstrap.com/docs/4.6/components/collapse/#via-javascript"
下一篇：未處理的例外。NoSuchMethodError。方法'showNotificationDaily'在flutter中被呼叫為空。