当元素在Next.js中更改状态时，是否有一种方法来添加动画转换？

Question

在我的项目中，我想做一个导航栏/标题和搜索栏，就像苹果桌面网站上的一样。它的工作方式是，最初，搜索栏应该是隐藏的，而标题是可见的。当我单击标题上的一个按钮时，它应该触发一个状态挂钩，在隐藏标题的同时使搜索栏可见。当这种情况发生时，需要在状态之间进行平稳的转换，在这些状态中，头链接逐渐淡出，变小，并显示搜索栏。

我想出了如何让标题显示搜索栏并隐藏自己，但我不知道如何使在状态变化期间激活的平滑转换工作。

这是我的密码：

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和类型记录。我也在用Tailwindcss

Answer 1

我想框架器可能就是你要找的。它是一个库，它支持页面上的React组件的动画，并且当组件进入和离开时。以这个收集器为例(它不是我的，它是由@Danila发布的在这个岗位上 )