动画切换菜单下拉菜单

Question

我想在切换菜单时为其设置动画。我不知道我错过了什么。我试过设置内联样式，但没有用。 在这个项目中，我将 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;

Answer 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”大小显示然后立即更改为您想要的值来使这更复杂...只是更复杂。