在我的项目中，我想制作一个导航栏/标题栏和搜索栏，就像苹果桌面网站上的一样。它的工作方式应该是，最初，搜索栏应该是隐藏的，而标题是可见的。当我点击标题上的按钮时，它应该触发一个状态挂钩，使搜索栏可见，同时隐藏标题。当这种情况发生时，在标题链接淡出并变得更小并显示搜索栏的状态之间需要平滑的转换。
我能够弄清楚如何让标题使搜索栏可见并隐藏它自己，但我不能弄清楚如何使状态变化期间激活的平滑转换工作。
以下是我的代码：

import React from 'react'
import {
    XMarkIcon
} from '@heroicons/react/24/solid'
import {
    useState,
    useEffect
} from 'react';
type Props = {}
const SearchBar = (props: Props) => {
    const [show, setShow, ] = useState((false));
    return (<div className="bg-gray-800">
 {show? <p></p>:true}
 {show? <p></p>:false}
 
 
<div className={show? "hidden" : " h-8 z-20 fixed left-0 top-0 right-0 transition-all duration-500 ease p-10"} id="nav-container">

{/* <button>onClick={()=> setShow(false)}</button> */}

        <nav className= "w-[1000px]  ml-auto mr-auto pl-2 pr-2 transition-transform duration-400 ease">
   
            <ul className="flex justify-between content-center"  id="desktop-nav">
              
                <li>
                    <a href="#" id="link-logo"></a>
                </li>
                <li>
          
                    <a className="text-[#fff] text-sm opacity-50 hover:opacity-100"  href="#">Mac</a>
                  
                </li>
                <li>
                    <a  className="text-[#fff] text-sm opacity-50 hover:opacity-100" href="#">iPad</a>
                </li>
                <li>
                    <a className="text-[#fff] text-sm opacity-50 hover:opacity-100" href="#">iPhone</a>
                </li>
                <li>
                    <a className="active:transition-all duration-800 text-[#fff] text-sm opacity-50 hover:opacity-100" href="#">Watch</a>
                </li>
                
                <li>
                    <a className="active:transition-all duration-800 text-[#fff] text-sm opacity-50 hover:opacity-100" href="#">TV</a>
                </li>
                
                <li>
                    <a className="text-[#fff] text-sm opacity-50  hover:opacity-100" href="#">Music</a>
                </li>
                <li>
                    <a  onClick={()=> setShow(true)} className=" text-[#fff] text-sm opacity-50 hover:opacity-100  transition-all duration-500 " href="#">Support</a>
                </li>
                <li>
                    <a className="text-[#fff] text-sm opacity-50 hover:opacity-100" href="#" id="link-search"></a>
                </li>
                <li>
                    <a className="text-[#fff] text-sm opacity-50 hover:opacity-100 " href="#" id="link-bag"></a>
                </li>
              <li>
               
              </li>
            </ul>
           
        </nav>
        
</div>



{/* Search Bar Section*/}
{show?
   <div id="search-container" className="  w-[60%] mt-0 mb-0 mr-auto ml-auto
    fixed top-0 z-20 pr-11 pl-11 left-0 right-0 ">

    <div id="link-search" className="absolute left-3 ">
    <div id="search-bar">
    <form action="" className="mt-0 mb-0 ml-auto mr-auto m w-full">

    <input className="w-full h-11 m-auto outline-none border-none bg-transparent text-white font-sans
      text-xl "type="text" placeholder="Search apple.com/ca"></input>

    </form>
    </div>
    {/* Styling for Close/X button*/}

    <XMarkIcon onClick={()=> setShow(false)} id="link-close"className="absolute top-2.5  left-[580px]  opacity-40 h-5 w-5 text-blue-500 transition-all duration-500
    hover:opacity-100 block bg-center bg-no-repeat cursor-pointer"/>

<div className="bg-white text-black absolute left-0 right-0 pt-4 pb-4 pl-2 pr-2 rounded-b-lg w-[600px]" id="quick-links">
<h2 className="text-lg font-bold ml-8 mr-8 mt-2.5">Quick Links</h2>
<ul className="mt-3">

<li>
                        <a className="inline-block w-full pt-2 pb-2 pl-14 pr-14 hover:bg-[#f5f5f5] hover:text-[#2997ff]" href="#">Visiting an Apple Store FAQ</a>
                    </li>
                    <li>
                        <a className="inline-block w-full pt-2 pb-2 pl-14 pr-14 hover:bg-[#f5f5f5] hover:text-[#2997ff]" href="#">Shop Apple Store Online</a>
                    </li>
                    <li>
                        <a className="inline-block w-full pt-2 pb-2 pl-14 pr-14 hover:bg-[#f5f5f5] hover:text-[#2997ff]" href="#">Accessories</a>
                    </li>
                    <li>
                        <a className="inline-block w-full pt-2 pb-2 pl-14 pr-14 hover:bg-[#f5f5f5] hover:text-[#2997ff]" href="#">AirPods</a>
                    </li>
                    <li>
                        <a className="inline-block w-full pt-2 pb-2 pl-14 pr-14 hover:bg-[#f5f5f5] hover:text-[#2997ff]" href="#">AirTag</a>
                    </li>
</ul>

</div>
    
    </div>

    </div>
    :true}

{show?
     <div className="fixed  w-full h-screen left-0 top-0 " id="overlay show"> </div>
     :true}
      {/* Overlay Background: bg-[#606060]*/}
      
 

    </div>)
}
export default SearchBar

我在Next.js中使用React和Typescript来完成这个项目。