ReactJS中能否使用HeadlessUI为路由加载的组件添加过渡效果？如何实现？

核心问题 #

你当前的实现存在两个核心错误导致离场动画无法触发：

1. Transition的show属性被写死为true，组件永远不会触发离场状态逻辑
2. Transition被包裹在单个Route内部，路由失配时整个Route子树会被直接卸载，没有给动画预留执行时间

解决方案 #

将所有需要过渡的页面的Transition组件统一放在永久存在的父容器内，通过当前路由路径动态控制每个Transition的show属性，由HeadlessUI内部自动处理动画完成后的组件卸载逻辑，即可实现重叠切换效果。

实现代码（基于React Router v6）

首先统一封装过渡容器：

import { useLocation } from 'react-router-dom'
import { Transition } from '@headlessui/react'
import Subtest1 from './Subtest1'
import Subtest2 from './Subtest2'

function RouteTransitionContainer() {
  const location = useLocation()
  // 所有需要过渡的页面配置
  const pageList = [
    { path: '/Subtest1', element: <Subtest1 /> },
    { path: '/Subtest2', element: <Subtest2 /> }
  ]

  return (
    // 父容器固定定位，作为过渡页面的定位参照物
    <div className="relative w-full h-screen overflow-hidden">
      {pageList.map(page => (
        <Transition
          key={page.path}
          appear={true}
          // 路由匹配时触发进入动画，失配时触发离场动画
          show={location.pathname === page.path}
          enter="transform duration-500"
          enterFrom="translate-x-full"
          enterTo="translate-x-0"
          leave="transform duration-500"
          leaveFrom="translate-x-0"
          leaveTo="filter brightness-50 -translate-x-1/2"
          as="div"
          // 新页面默认在旧页面上方，符合你要的重叠效果
          className="absolute z-20 top-0 left-0 w-full h-full flex items-center justify-center"
        >
          {page.element}
        </Transition>
      ))}
    </div>
  )
}

export default RouteTransitionContainer

然后调整你的路由配置，移除原来的单个Route包裹，统一匹配过渡容器：

<Routes>
  {/* 其他不需要过渡的路由正常写 */}
  <Route path="/*" element={<RouteTransitionContainer />} />
</Routes>

原理解释 #

HeadlessUI的Transition组件会监听show属性的变化：当show从true变为false时，会先执行你定义的leave阶段动画，等动画时长走完后才会卸载内部组件。我们把所有Transition放在永久存在的父容器中，不存在路由失配直接卸载的问题，即可完整触发进入、离场两段动画，自然实现两个页面的重叠切换效果。

适配提示 #

如果你的路由带有动态参数，可使用useMatch替代路径全等判断：

import { useMatch } from 'react-router-dom'
const matchDetail = useMatch('/detail/:id')
// show属性赋值为 !!matchDetail 即可

如果使用的是React Router v5，将useLocation替换为useHistory监听路径变化、useRouteMatch做匹配判断即可，逻辑完全一致。

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