我想創建一些東西，根據狀態，給定的 div 似乎與右側的另一個 div 重疊，這是我的代碼：
const [loggedIn, setLoggedIn] = useState<boolean>(false);
const [hasConfirmedAccount, setHasConfirmedAccount] = useState<boolean>(false);
return (
<>
<div style={{ width: "100%" }}>
<div style={{ float: "left", width: "50%" }}>
<div
style={{ width: "100%", height: "100vh", backgroundColor: "#fafafafa" }}
></div>
</div>
<div id='notLoggedIn' style={{ float: "right", width: "50%" }}>
{!loggedIn && (
<div>
WHEN LOGGED IN === TRUE
</div>
)}
<div
style={
loggedIn && !hasConfirmedAccount
? { width: "100%", transition: "ease-in-out 5s" }
: { display: "none" }
}
>
<div id="notConfirmedAccount">WHENE LOGGED IN === TRUE AND hasConfirmedAccount === FALSE</div>
</div>
</div>
</div>
</>
);
代碼作業正常，當loggedIn === true和hasConfirmedAccount === falsediv withid = notConfirmedAccount被顯示而不是 div with 時id=notLoggedIn，但顯示這個 div 不能正常作業，我想要右側 div 的緩慢離開效果，它會與前一個 div 重疊
有人可以告訴我該怎么做嗎？
謝謝你的幫助！
uj5u.com熱心網友回復：
- 安裝 animate.css => $ npm install animate.css --save animate.css
2.在您的組件或專案頂部匯入“./animate.css”
3.只需將 anianmte 的名稱放在 className 上，就像您的 div 中的這種模式一樣
<div className={style.forgot} className='animate__animated animate__fadeInDown'>
你也應該用狀態控制你的顯示 div
uj5u.com熱心網友回復：
使用 React 影片插件ReactTransitionGroup和ReactCSSTransitionGroup
ReactTransitionGroup 附加組件是一個用于影片的低級 API，而 ReactCSSTransitionGroup 是一個附加組件，用于輕松實作基本的 CSS 影片和過渡。
https://reactjs.org/docs/animation.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/411382.html
標籤：
下一篇：網頁在移動設備上開始縮小