新增动画

src/components/AboutMe/index.jsx

@@ -3,10 +3,18 @@ import {motion} from "framer-motion";
 import HeadPortrait from "./HeadPortrait";
 import LanguageSection from "./LanguageSection";
 import WorkExperience from "./WorkExperience";
+import {pageVariants} from "../../config";
 
 const AboutMe = ({wakatimeData, imgUrl, skipUrl}) => {
     return (
-        <div className="min-h-screen dark:bg-gray-900 text-white flex flex-col items-center justify-center p-4">
+        <motion.div
+            className="min-h-screen dark:bg-gray-900 text-white flex flex-col items-center justify-center p-4"
+            variants={pageVariants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            transition={{ duration: 0.5 }}
+        >
 
             <HeadPortrait headPortrait={imgUrl.headPortrait}/>
 
@@ -29,7 +37,7 @@ const AboutMe = ({wakatimeData, imgUrl, skipUrl}) => {
                 imgUrl={imgUrl}
             />
 
-        </div>
+        </motion.div>
     );
 };
 

src/components/Tools/index.jsx

@@ -1,15 +1,21 @@
 import React from "react";
+import {motion} from "framer-motion";
 import {Button} from '@douyinfe/semi-ui';
 import {IoIosArrowBack} from "react-icons/io";
 import {useNavigate} from "react-router-dom";
 import CategorySection from "./CategorySection";
-import {DEVICES, SOFTWARE_TOOLS} from "../../config";
+import {DEVICES, pageVariants, SOFTWARE_TOOLS} from "../../config";
 
 const Tools = () => {
     const navigate = useNavigate()
     return (
-        <div
+        <motion.div
             className="w-[60%] mx-auto min-h-screen dark:bg-gray-900 text-white flex flex-col items-center p-4 mt-3"
+            variants={pageVariants}
+            initial="initial"
+            animate="animate"
+            exit="exit"
+            transition={{duration: 0.5}}
         >
             <div className="w-full flex justify-start text-white">
                 <Button
@@ -30,7 +36,7 @@ const Tools = () => {
                 <CategorySection title="Software Tools" categories={Object.values(SOFTWARE_TOOLS)}/>
                 <CategorySection title="Hardware Devices" categories={Object.values(DEVICES)}/>
             </div>
-        </div>
+        </motion.div>
     );
 };
 

src/config.js

@@ -24,6 +24,12 @@ export const apiList = {
     wakaTime: `${apiBaseUrl}/waka_time.json`,
 }
 
+export const pageVariants = {
+    initial: { opacity: 0, x: -100 },
+    animate: { opacity: 1, x: 0 },
+    exit: { opacity: 0, x: 100 },
+};
+
 export const SOFTWARE_TOOLS = {
     development: {
         title: 'Development',