Tailwind CSS の React ドロワーコンポーネントの閉じるアニメーションの問題を解決する方法

Question

私の React プロジェクトでも、tailwind CSS を使用し、メニューのアイコンをクリックするとドロワーが開く機能を実装しました。

問題は、私の実装では終了アニメーションが失われることです (開始アニメーションは正常のままです)。

このコンポーネントを見てみましょう:

import React, { useState } from 'react';
「react-router-dom」から {Link} をインポートします。
"@heroicons/react/24/solid" から {PlusCircleIcon} をインポートします。
"../record/AddRecordTabs" から AddRecordTabs をインポートします。
「@material-tailwind/react」から {Drawer} をインポートします。

const メニュー = () => {
    const [open, setOpen] = React.useState(false);

    const openDrawer = () => {
        setOpen(true);
    };
    const closeDrawer = () => {
        setOpen(false);
    };

    React.useEffect(() => {
        if (オープン) {
            document.body.style.overflow = "非表示";
        } それ以外 {
            document.body.style.overflow = "自動";
        }
    }、 [開ける]）;

    戻る （
        

            


                

                    
                        
                    
                

            
            
            {開く && (
                <>
                    
 { closeDrawer(); } }>

Answer 1

Drawer 周辺の条件付きレンダリングを削除することを検討してください。これにより、アニメーションが発生する前に、Drawer の DOM がページから完全に削除されます。

StackBlitz でライブ実装をご覧ください。 https://stackblitz.com/edit/vitejs-vite-npqpjg?file=src/App.jsx