如何使用Tailwind CSS与React实现右入右出的页面过渡效果

你的实现存在3个核心问题：

• 过渡状态绑定在Search组件内部，路由跳转时组件会直接销毁，离场动画没有执行时机
• 直接用Link跳转路由会立即切换组件，Transition的离场逻辑无法触发
• showSearchPage默认值为true，组件挂载后直接进入显示状态，入场动画不会触发

方案：路由层统一管理过渡动画 #

我们将过渡逻辑抽离到路由根组件，通过路由路径控制过渡状态，保证动画执行完成后再完成组件切换。

1. 调整路由根组件（App.jsx） #

import { Routes, Route, useLocation } from 'react-router-dom'
import { Transition, TransitionGroup } from '@headlessui/react'
import Home from './Home'
import SearchCategoryPage from './SearchCategoryPage'

function App() {
  const location = useLocation()
  return (
    <div className="relative min-h-screen">
      {/* 常驻展示的首页路由 */}
      <Routes location={location}>
        <Route path="/" element={<Home />} />
      </Routes>
      {/* 带过渡效果的搜索页路由 */}
      <TransitionGroup className="relative">
        <Transition
          key={location.pathname}
          show={location.pathname === '/search'}
          enter="transition-all duration-300 ease-out"
          enterFrom="translate-x-full"
          enterTo="translate-x-0"
          leave="transition-all duration-300 ease-in"
          leaveFrom="translate-x-0"
          leaveTo="translate-x-full"
        >
          <Routes location={location}>
            <Route path="/search" element={<SearchCategoryPage />} />
          </Routes>
        </Transition>
      </TransitionGroup>
    </div>
  )
}
export default App

2. 改造SearchCategoryPage组件 #

移除内部的状态和Transition组件，仅保留页面内容：

import { Link } from "react-router-dom";

const SearchCategoryPage = () => {
  return (
    <div className="fixed bg-black text-white max-w-2xl mx-auto inset-0 z-40 overflow-y-scroll">
      <Link to="/">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur
        animi inventore accusantium incidunt deleniti, minima, molestiae libero
        consectetur eligendi, veniam iure eum repellendus. Accusamus, sapiente
        id, voluptatum assumenda sunt totam natus explicabo sit ipsam facere
        optio vitae fugit tempora hic. Id mollitia rerum accusamus accusantium.
        Nulla a nihil fugit aliquam provident porro! Sunt ducimus totam minima
        ipsam illo labore, asperiores animi nemo quo tempora tenetur
        perspiciatis aspernatur error, molestiae delectus consequatur sapiente
        exercitationem esse eaque, suscipit mollitia! Vel sit vitae id eos
        exercitationem? Id veritatis voluptatem facere mollitia, ab ipsum, atque
        voluptatum eos eius illo nam ea consequatur vel inventore?
      </Link>
    </div>
  );
};
export default SearchCategoryPage;

3. 首页代码无需调整 #

<Link to="/search">
  <img src={Search} alt="search" className="cursor-pointer" />
</Link>

注意事项 #

• Tailwind v3及以上版本不需要手动添加transform类名，位移属性会自动触发transform效果
• 搜索页的z-index必须高于首页，避免被首页内容遮挡
• 如果使用React Router v6以下版本，需要对应调整路由匹配逻辑

内容的提问来源于stack exchange，提问作者Chandler Bing