Bagaimana untuk menyelesaikan masalah penutupan animasi komponen laci React Tailwind CSS

Question

Dalam projek React saya, saya juga menggunakan tailwind CSS, dan saya melaksanakan fungsi membuka laci selepas mengklik ikon dalam menu.

Masalahnya ialah dalam pelaksanaan saya animasi penutup hilang (animasi pembukaan kekal normal).

Mari kita lihat komponen ini:

import React, { useState } daripada 'react';
import {Pautan} daripada "react-router-dom";
import {PlusCircleIcon} daripada "@heroicons/react/24/solid";
import AddRecordTabs daripada "../record/AddRecordTabs";
import {Drawer} daripada "@material-tailwind/react";

const Menu = () =>
    const [open, setOpen] = React.useState(false);

    const openDrawer = () =>
        setOpen(benar);
    };
    const closeDrawer = () =>
        setOpen(false);
    };

    React.useEffect(() => {
        jika (terbuka) {
            document.body.style.overflow = "tersembunyi";
        } lain {
            document.body.style.overflow = "auto";
        }
    }, [buka]);

    kembali (
        

            


                

                    
                        
                    
                

            
            
            {buka &&
                <>
                    
 }>
                    

                        
                            saiz={window.innerHeight * 0.9}
                            className="pt-2 bg-green-50 border-t-1 border-green-900 rounded-t-[10px]"
                        >
                            

                                

                                    
                                
                            
                        
                    
                
            )}
        
    );
}

eksport Menu lalai;
Kami tidak perlu risau tentang komponen AddRecordsTabs 
Apa salah saya? apa salahnya 
            

Answer 1

Pertimbangkan untuk mengalih keluar DOM di sekeliling Drawer 的条件渲染。这将在任何动画发生之前完全从页面中移除 Drawer.

Lihat pelaksanaan secara langsung di StackBlitz. https://stackblitz.com/edit/vitejs-vite-npqpjg?file=src%2FApp.jsx