国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

解決Tailwind CSS的React抽屜元件關(guān)閉動(dòng)畫問題的方法
P粉545682500
P粉545682500 2023-08-13 10:44:01
0
1
1237
<p>在我的React專案中,我還使用了tailwind CSS,我實(shí)現(xiàn)了在選單中點(diǎn)擊圖示後開啟抽屜的功能。 </p> <p>問題是,在我的實(shí)作中關(guān)閉動(dòng)畫遺失了(開啟動(dòng)畫保持正常)。 </p> <p>讓我們來看這個(gè)組件:</p> <pre class="brush:php;toolbar:false;">import React, { useState } from 'react'; import {Link} from "react-router-dom"; import {PlusCircleIcon} from "@heroicons/react/24/solid"; import AddRecordTabs from "../record/AddRecordTabs"; import {Drawer} from "@material-tailwind/react"; const Menu = () => { const [open, setOpen] = React.useState(false); const openDrawer = () => { setOpen(true); }; const closeDrawer = () => { setOpen(false); }; React.useEffect(() => { if (open) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } }, [open]); return ( <div className="fixed bottom-0 left-0 w-full bg-white z-50 border-t-1 border-green-900"> <div className="h-[60px] flex items-center justify-between"> <div className="flex items-center justify-center flex-grow"> <Link onClick={openDrawer}> <PlusCircleIcon color="green" className="w-12 h-12" strokeWidth={2} /> </Link> </div> </div> {open && ( <> <div className="fixed top-0 left-0 right-0 bottom-0 z-0 bg-black bg-opacity-50 backdrop-blur-sm" onClick={() => { closeDrawer(); } }></div> <div> <Drawer placement="bottom" open={open} onClose={() => closeDrawer()} size={window.innerHeight * 0.9} className="pt-2 bg-green-50 border-t-1 border-green-900 rounded-t-[10px]" > <div className=" h-full overflow-y-auto"> <div className="flex items-center justify-between"> <AddRecordTabs closeDrawer={closeDrawer} /> </div> </div> </Drawer> </div> </> )} </div> ); } export default Menu;</pre> <p>我們不需要擔(dān)心<code>AddRecordsTabs</code>組件和傳遞的值,因?yàn)樗旧现皇莻鬟f了關(guān)閉抽屜的功能。 </p> <p>我做錯(cuò)了什麼?有什麼錯(cuò)誤? </p>
P粉545682500
P粉545682500

全部回覆(1)
P粉729436537

考慮移除圍繞 Drawer 的條件渲染。這將在任何動(dòng)畫發(fā)生之前完全從頁面中移除 Drawer 的 DOM。

請(qǐng)參閱 StackBlitz 上的即時(shí)實(shí)作。 https://stackblitz.com/edit/vitejs-vite-npqpjg?file=src/App.jsx

最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板