为导航切换提供淡入淡出动画效果的思路和实现

效果

如下方视频所示，在切换路由时，旧页面内容会先淡出，然后跳转新路由，并有淡入的动画效果。

> 下载演示视频 <

思路

改写原有跳转逻辑，在点击跳转按钮后，流程应该是这样：

1. 旧页面内容呈现淡出效果
2. 在淡出动画播放完毕后进行路由跳转
3. 新页面内容呈现淡入效果

大体思路是这样，具体实现思路和方法有很多，可以根据项目具体情况自行实现。如果是 React SPA 应用，可以参考以下实现示例。

实现

此示例是 React SPA 应用，这里我的实现借助了 Headless UI 组件库的 Transition 组件，并使用 tailwind css 指定淡入淡出动画效果。

核心代码

<Transition
  as={Fragment}
  show={isShowingContent}
  unmount={false}
  appear={true}
  enter="ease-out duration-[640ms]"
  enterFrom="opacity-0 scale-100 blur-lg"
  enterTo="opacity-100 scale-100 blur-none"
  leave="ease-in duration-150"
  leaveFrom="opacity-100 scale-100 blur-none"
  leaveTo="opacity-0 scale-100 blur-lg"
  afterLeave={() => {
    setTimeout(() => {
      navigate(toUrl.current);
      setIsShowingContent(true);
    }, 0);
  }}
>
  <Content className={'flex origin-center min-w-60 bg-white'}>
    <div
      className={
        'border border-gray-200 rounded-xl m-4 md:m-8 my-8 box-border grow duration-300 overflow-hidden'
      }
      style={{
        background: colorBgContainer,
        borderRadius: borderRadiusLG,
      }}
    >
      <Routes>
        <Route path="userinfo" element={<Profile />} />
        <Route path="daoList" element={<DAOs />} />
        <Route path="dataList" element={<DataList />} />
        <Route path="dashboard" element={<Dashboard />} />
        <Route path="*" element={<ErrorPage />} />
      </Routes>
    </div>
  </Content>
</Transition>

核心是通过show={isShowingContent}来控制显隐（以及要淡入还是淡出），并通过afterLeave钩子在淡出之后执行路由跳转。