added settings tab transitions

packages/app/src/components/PageTransition/index.jsx

@@ -0,0 +1,19 @@
+import React from "react"
+import { motion, AnimatePresence } from "framer-motion"
+
+const PageTransition = (props) => {
+    return <AnimatePresence>
+        <motion.div
+            layout
+            initial={{ y: 10, opacity: 0 }}
+            animate={{ y: 0, opacity: 1 }}
+            exit={{ y: -10, opacity: 0 }}
+            transition={{ duration: 0.2 }}
+            {...props}
+        >
+            {props.children}
+        </motion.div>
+    </AnimatePresence>
+}
+
+export default PageTransition

packages/app/src/pages/settings/index.jsx

@@ -2,6 +2,7 @@ import React from "react"
 import * as antd from "antd"
 import { Translation } from "react-i18next"
 
+import PageTransition from "@components/PageTransition"
 import { createIconRender } from "@components/Icons"
 import config from "@config"
 
@@ -146,10 +147,14 @@ export default () => {
             />
         </div>
 
-        <div className="settings_content">
-            {
-                loading && <antd.Skeleton active />
-            }
+        {
+            loading && <antd.Skeleton active />
+        }
+
+        <PageTransition
+            className="settings_content"
+            key={activeKey}
+        >
             {
                 !loading && <SettingTab
                     baseConfig={config}
@@ -158,6 +163,6 @@ export default () => {
                     withGroups
                 />
             }
-        </div>
+        </PageTransition>
     </div>
 }