动画切换菜单下拉菜单

Question

当菜单被切换时，我想给它动画。我不知道我错过了什么。我尝试过设置内联风格，但它没有起作用。在这个项目中，我使用的是React和TailwindCSS。尾风转换效果也不起作用，所以我认为这必须用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;

Answer 1

没有过渡发生，因此，你没有任何动画。

无论什么时候

{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“，然后立即更改为所需的值，则可以使此操作变得更加复杂.只是更复杂而已。