Tailwind css 中的所有过渡都无法正常工作

Question

为什么当我打开切换栏内容时立即出现但如果我关闭它转换 kciks ？

常量导航栏 = () => { const [nav,setNav] = useState(true)

const handleNav = () =>{
    setNav(!nav);
}


return (
    <div>
        <div className='flex justify-between hidden'>
            <img className='w-[140px] mx-3'src={dremslogo} alt='/'></img>
            <ul className='flex'>
                <li className='p-6 py-10 text-xl'>Home</li>
                <li className='p-6 py-10 text-xl'>About</li>
                <li className='p-6 py-10 text-xl'>Features</li>
                <li className='p-6 py-10 text-xl'>Contact</li>
                <li className='p-6 ml-10 py-10 text-xl'>Register</li>
                <li className='p-6 py-10 text-xl'>Log in</li>
            </ul>
        </div>
        <div className='flex justify-between flex-wrap back'>
            <img className='w-[180px] p-5'src={dremslogo} alt='/'></img>
            <div className='p-5 pt-9' onClick={handleNav}>
                {!nav ? <AiOutlineClose className='cursor-pointer' size={35} /> : <AiOutlineMenu className= 'cursor-pointer' size={35}/>}
            </div>
        <ul className={!nav ? 'w-[100%] max-h-screen':
                            'w-[100%] max-h-0 overflow-hidden transition-all duration-500'} 
                        onClick={handleNav}>
            <li className='p-3 px-5 text-xl'>Home</li>
            <li className='p-3 px-5 text-xl'>About</li>
            <li className='p-3 px-5 text-xl'>Features</li>
            <li className='p-3 px-5 text-xl'>Contact</li>
            <li className='p-3 px-5 text-xl'>Register</li>
            <li className='p-3 px-5 text-xl'>Log in</li>
        </ul>
        </div>
    </div>
 
 );

Answer 1

这无法正常工作，因为您有条件地添加了

transition-all

类。你不应该有条件地添加这个类。

您当前仅在导航栏关闭时才添加课程 (!nav)：

<ul className={!nav ? 
 'w-[100%] max-h-screen'
 : 'w-[100%] max-h-0 overflow-hidden transition-all duration-500'}
>

你应该总是添加

transition-all

类。而不是当

nav

为假时。

您可以通过使用模板文字来包装您的逻辑并永久添加

transition-all

来解决此问题。

<ul className={`transition-all ${!nav ? 'w-[100%] max-h-screen': 'w-[100%] max-h-0 overflow-hidden duration-500'}`}