当元素在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 发布在这篇帖子上的