feat: add route transition

package.json

@@ -38,6 +38,7 @@
     "react-hook-form": "^7.39.5",
     "react-i18next": "^12.0.0",
     "react-router-dom": "^6.4.3",
+    "react-transition-group": "^4.4.5",
     "react-virtuoso": "^3.1.3",
     "recoil": "^0.7.6",
     "snarkdown": "^2.0.0",

src/assets/styles/anime.scss

@@ -0,0 +1,21 @@
+.page-enter {
+  opacity: 0;
+  transform: scale(0.9);
+}
+
+.page-enter-active {
+  opacity: 1;
+  transform: scale(1);
+  transition: opacity 300ms, transform 300ms;
+}
+
+.page-exit {
+  opacity: 1;
+  transform: scale(0);
+}
+
+.page-exit-active {
+  opacity: 0;
+  transform: scale(0.9);
+  transition: opacity 300ms, transform 300ms;
+}

src/assets/styles/index.scss

@@ -42,6 +42,7 @@ body {
 
 @import "./layout.scss";
 @import "./page.scss";
+@import "./anime.scss";
 
 @media (prefers-color-scheme: dark) {
   :root {

src/pages/_layout.tsx

@@ -4,7 +4,8 @@ import relativeTime from "dayjs/plugin/relativeTime";
 import { SWRConfig, mutate } from "swr";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
-import { Route, Routes } from "react-router-dom";
+import { Route, Routes, useLocation } from "react-router-dom";
+import { CSSTransition, TransitionGroup } from "react-transition-group";
 import { alpha, List, Paper, ThemeProvider } from "@mui/material";
 import { listen } from "@tauri-apps/api/event";
 import { appWindow } from "@tauri-apps/api/window";
@@ -34,6 +35,8 @@ const Layout = () => {
   const { verge } = useVerge();
   const { theme_blur, language } = verge || {};
 
+  const location = useLocation();
+
   useEffect(() => {
     window.addEventListener("keydown", (e) => {
       // macOS有cmd+w
@@ -136,7 +139,12 @@ const Layout = () => {
               </div>
             )}
 
-            <div className="the-content">
+            <TransitionGroup className="the-content">
+              <CSSTransition
+                key={location.pathname}
+                timeout={300}
+                classNames="page"
+              >
                 <Routes>
                   {routers.map(({ label, link, ele: Ele }) => (
                     <Route
@@ -150,7 +158,8 @@ const Layout = () => {
                     />
                   ))}
                 </Routes>
-            </div>
+              </CSSTransition>
+            </TransitionGroup>
           </div>
         </Paper>
       </ThemeProvider>