我想在菜单切换时制作动画。我不知道我在想什么。我尝试设置内联样式，但是没有用。 在这个项目中，我将React与TailwindCSS一起使用。 Tailwind过渡效果也不起作用，因此我想必须使用CSS和/或JavaScript来完成。 这是我的代码：
import React, { useState } from 'react';
import { NavLink } from 'react-router-dom';
const NavBar = () => {
const [open, setOpen] = useState(false);
const toggleOpenHandler = () => setOpen(!open);
return (
<div>
<div className="relative px-4 pt-6 bg-red-100 sm:px-6 lg:px-8">
<nav className="relative flex items-center justify-between sm:h-10 lg:justify-start">
<div className="flex items-center flex-grow flex-shrink-0 lg:flex-grow-0">
<div className="flex items-center justify-between w-full md:w-auto">
<NavLink to="/" aria-label="Home">
<img className="w-auto h-8 sm:h-10" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt="Logo" />
</NavLink>
<div className="flex items-center -mr-2 md:hidden">
<button onClick={toggleOpenHandler} type="button" className="inline-flex items-center justify-center p-2 text-blue-400 transition duration-150 ease-in-out rounded-md hover:text-blue-500 hover:bg-blue-100 focus:outline-none focus:bg-blue-100 focus:text-blue-500" id="main-menu" aria-label="Main menu" aria-haspopup="true">
<svg className="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
</svg>
</button>
</div>
</div>
</div>
<div className="hidden md:block md:ml-10 md:pr-4">
<NavLink to="/services" className="font-medium text-blue-500 transition duration-150 ease-in-out hover:text-blue-900">Serviços</NavLink>
<NavLink to="/about" className="ml-8 font-medium text-blue-500 transition duration-150 ease-in-out hover:text-blue-900">Sobre</NavLink>
<NavLink to="/releases" className="ml-8 font-medium text-blue-500 transition duration-150 ease-in-out hover:text-blue-900">Lançamentos</NavLink>
<NavLink to="/contact" className="ml-8 font-medium text-indigo-600 transition duration-150 ease-in-out hover:text-indigo-900">Contato</NavLink>
</div>
</nav>
</div>
{/*
Mobile menu, show/hide based on menu open state.
Entering: "duration-150 ease-out"
From: "opacity-0 scale-95"
To: "opacity-100 scale-100"
Leaving: "duration-100 ease-in"
From: "opacity-100 scale-100"
To: "opacity-0 scale-95"
*/}
{open &&
<div style={{ transition: 'all 3s ease-in-out' }} className="absolute inset-x-0 top-0 p-2 transition origin-top-right transform md:hidden">
<div className="rounded-lg shadow-md">
<div className="overflow-hidden bg-red-100 rounded-lg shadow-xs" role="menu" aria-orientation="vertical" aria-labelledby="main-menu">
<div className="flex items-center justify-between px-5 pt-4">
<div>
<img className="w-auto h-8" src="https://tailwindui.com/img/logos/workflow-mark-on-white.svg" alt="" />
</div>
<div className="-mr-2">
<button onClick={toggleOpenHandler} type="button" className="inline-flex items-center justify-center p-2 text-blue-400 transition duration-150 ease-in-out rounded-md hover:text-blue-500 hover:bg-blue-100 focus:outline-none focus:bg-blue-100 focus:text-blue-500" aria-label="Close menu">
<svg className="w-6 h-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div className="px-2 pt-2 pb-3">
<NavLink to="/services" className="block px-3 py-2 text-base font-medium text-blue-700 transition duration-150 ease-in-out rounded-md hover:text-blue-900 hover:bg-blue-50 focus:outline-none focus:text-blue-900 focus:bg-blue-50" role="menuitem">Serviços</NavLink>
<NavLink to="/about" className="block px-3 py-2 mt-1 text-base font-medium text-blue-700 transition duration-150 ease-in-out rounded-md hover:text-blue-900 hover:bg-blue-50 focus:outline-none focus:text-blue-900 focus:bg-blue-50" role="menuitem">Sobre</NavLink>
<NavLink to="/releases" className="block px-3 py-2 mt-1 text-base font-medium text-blue-700 transition duration-150 ease-in-out rounded-md hover:text-blue-900 hover:bg-blue-50 focus:outline-none focus:text-blue-900 focus:bg-blue-50" role="menuitem">Lançamentos</NavLink>
</div>
<div>
<NavLink to="#" className="block w-full px-5 py-3 font-medium text-center text-indigo-600 transition duration-150 ease-in-out bg-blue-50 hover:bg-blue-100 hover:text-indigo-700 focus:outline-none focus:bg-blue-100 focus:text-indigo-700" role="menuitem">
Contato
</NavLink>
</div>
</div>
</div>
</div>
}
</div>
);
}
export default NavBar;
答案 0 :(得分：1)
没有过渡发生，因此，您没有任何动画。
此div
{open &&
<div style={{ transition: 'all 3s ease-in-out' }} className="absolute inset-x-0 top-0 p-2 transition origin-top-right transform md:hidden">
放入DOM，它已经设置了宽度和高度。如果要转换，则需要将初始高度（或宽度）设置为零，然后将其转换为实际值。
考虑将不包含open &&部分，而仅将其“隐藏”的div（尺寸之一为零），如下所示：
<div
style={{ transition: 'all 3s ease-in-out', width: open ? '100px' : '0' }}
className="absolute inset-x-0 top-0 p-2 transition origin-top-right transform md:hidden"
>
您可以通过将组件的大小显示为“ 0”，然后立即将其更改为所需的值来使事情变得更加复杂。