有没有办法在 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 和 Typescript。我也在使用 Tailwindcss

Answer 1

我认为 Framer 可能是您要找的。它是一个库，可以在页面上以及组件进入和离开时启用 React 组件的动画。以snadbox为例（这不是我的，它是由@Danila 发布的on this post