解决Tailwind CSS的React抽屉组件关闭动画问题的方法
P粉545682500
P粉545682500 2023-08-13 10:44:01
[React讨论组]
<p>在我的React项目中,我还使用了tailwind CSS,我实现了在菜单中点击图标后打开抽屉的功能。</p> <p>问题是,在我的实现中关闭动画丢失了(打开动画保持正常)。</p> <p>让我们来看一下这个组件:</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 = () =&gt; { const [open, setOpen] = React.useState(false); const openDrawer = () =&gt; { setOpen(true); }; const closeDrawer = () =&gt; { setOpen(false); }; React.useEffect(() =&gt; { if (open) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } }, [open]); return ( &lt;div className="fixed bottom-0 left-0 w-full bg-white z-50 border-t-1 border-green-900"&gt; &lt;div className="h-[60px] flex items-center justify-between"&gt; &lt;div className="flex items-center justify-center flex-grow"&gt; &lt;Link onClick={openDrawer}&gt; &lt;PlusCircleIcon color="green" className="w-12 h-12" strokeWidth={2} /&gt; &lt;/Link&gt; &lt;/div&gt; &lt;/div&gt; {open &amp;&amp; ( &lt;&gt; &lt;div className="fixed top-0 left-0 right-0 bottom-0 z-0 bg-black bg-opacity-50 backdrop-blur-sm" onClick={() =&gt; { closeDrawer(); }}&gt;&lt;/div&gt; &lt;div&gt; &lt;Drawer placement="bottom" open={open} onClose={() =&gt; closeDrawer()} size={window.innerHeight * 0.9} className="pt-2 bg-green-50 border-t-1 border-green-900 rounded-t-[10px]" &gt; &lt;div className=" h-full overflow-y-auto"&gt; &lt;div className="flex items-center justify-between"&gt; &lt;AddRecordTabs closeDrawer={closeDrawer} /&gt; &lt;/div&gt; &lt;/div&gt; &lt;/Drawer&gt; &lt;/div&gt; &lt;/&gt; )} &lt;/div&gt; ); } export default Menu;</pre> <p>我们不需要担心<code>AddRecordsTabs</code>组件和传递的值,因为它基本上只是传递了关闭抽屉的功能。</p> <p>我做错了什么?有什么错误?</p>
P粉545682500
P粉545682500

全部回复(1)
P粉729436537

考虑移除围绕 Drawer 的条件渲染。这将在任何动画发生之前完全从页面中移除 Drawer 的 DOM。

请参阅 StackBlitz 上的实时实现。https://stackblitz.com/edit/vitejs-vite-npqpjg?file=src%2FApp.jsx

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号