簡單地說，我有兩個組件。主頁和搜索。
在/主頁上有一個搜索svg。當點擊該svg時，我想顯示/搜索。
我想讓頁面從右邊轉到中間，再從中間轉到右邊。
我試過tailwinds @headlessui/react，但它對我不起作用。請告訴我如何通過使用tailwind實作這種效果。
import React from "reaction";
import { Transition } from "@headlessui/react" ;
import { useState } from "react"。
import { Link } from "react-router-dom"。
const SearchCategoryPage = (/span>) => {
const [showSearchPage, setShowSearchPage] = useState(true)。
return (
<Transition
as="div"。
show={showSearchPage}。
enter="transition-all duration-300"
enterFrom="transform translate-x-full"。
enterTo="transform translate-x-0"。
leave="transition-all duration-300"。
leaveFrom="transform translate-x-0"
leaveTo="transform translate-x-full"。
className="fixed bg-black text-white max-w-2xl mx-auto inset-0 z-40 overflow-y-scroll"
>
<Link onClick={（） => setShowSearchPage（！showSearchPage）} to="/">
Lorem ipsum dolor sit amet consectetur adipisicing elit. 渴望
在此，我想說的是："我們要做的就是把我們的作業做得更好！"。
縱然如此，我也要把我的身體趕走。指責，智者
我的意思是說，我認為這是對國家的一種解釋。
你的生命在這一刻消逝了。我是個軟弱的人，指責我。
沒有任何一個人可以逃亡。你是誰？
我的勞動，我的生命，我的時間，我的生命，我的時間。
汗流浹背是錯誤的，痛苦的后果是智慧的。
鍛煉自己的能力，讓自己的身體更健康! 你的生命是什么？
鍛煉？我是真實的voluptatem facere mollitia, ab ipsum, atque
揮舞著你的手，你的名字，你的后果，你的發明？
</Link>/span>
</Transition>
);
};
export default SearchCategoryPage;
主頁
<Link to="/search"/span>>
<img。
src={Search}
alt="Search"
className="cursor-pointer"。
/>
</Link>
uj5u.com熱心網友回復：
一種方法可以是：
const SearchCategoryPage = (/span>) => {
const [showSearchPage, setShowSearchPage] = useState(true)。
const history = useHistory()
return (
<Transition()
as="div"。
appear={true} //This 將 使 the transition run everytime 的 組件 是 渲染的時候
show={showSearchPage}。
enter="transition-all duration-300"
enterFrom="transform translate-x-full"。
enterTo="transform translate-x-0"。
leave="transition-all duration-300"。
leaveFrom="transform translate-x-0"
leaveTo="transform translate-x-full"。
className="fixed bg-black text-white max-w-2xl mx-auto inset-0 z-40 overflow-y-scroll"
afterLeave={() => history.push('/')}。
>
<button onClick={() => setShowSearchPage((prev) =>!prev)}>
Lorem...
</button>
</Transition>
)
}
正如你所看到的，我在Transition組件上添加了一個history和一個afterLeave函式，還把鏈接改成了一個按鈕（或者任何有onClick屬性的都可以）。
這將首先觸發離開影片，離開后的函式將運行。
appear={true}是必要的，以便在每次渲染時觸發過渡。
appear - 過渡是否應該在初始加載時運行。- Headless UI docs
查看無頭UI的過渡道具 :) https://headlessui.dev/react/transition
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/319404.html
標籤：