added page-transition-duration

packages/app/constants/defaultTheme.json

@@ -9,7 +9,8 @@
         "layoutMargin": "unset",
         "layoutPadding": "10px",
         "text-color-white": "#d2d2d2",
-        "text-color-black": "#000000"
+        "text-color-black": "#000000",
+        "page-transition-duration": "150ms"
     },
     "defaultVariant": "light",
     "variants": {

packages/app/constants/settings/apparence/index.jsx

@@ -1,5 +1,4 @@
 import React from "react"
-import * as antd from "antd"
 import loadable from "@loadable/component"
 
 import "./index.less"
@@ -28,12 +27,35 @@ export default [
     {
         "id": "reduceAnimations",
         "storaged": true,
-        "group": "aspect",
+        "group": "animations",
         "component": "Switch",
-        "icon": "MdOutlineAnimation",
+        "icon": "MdOutlineSlowMotionVideo",
         "title": "Reduce animation",
         "experimental": true
     },
+    {
+        "id": "pageTransitionDuration",
+        "storaged": true,
+        "group": "animations",
+        "component": "Slider",
+        "icon": "MdOutlineSpeed",
+        "title": "Page transition duration",
+        "description": "Change the duration of the page transition animation.",
+        "props": {
+            min: 0,
+            max: 1000,
+            step: 50,
+            tooltip: {
+                formatter: (value) => `${value / 1000}s`
+            }
+        },
+        "emitEvent": "modifyTheme",
+        "emissionValueUpdate": (value) => {
+            return {
+                "page-transition-duration": `${value}ms`
+            }
+        },
+    },
     {
         "id": "auto_darkMode",
         "experimental": true,

packages/app/constants/settingsGroupsDecorator.json

@@ -15,6 +15,10 @@
         "title": "Aspect",
         "icon": "Eye"
     },
+    "animations": {
+        "title": "Animations",
+        "icon": "MdOutlineAnimation"
+    },
     "security.account": {
         "title": "Account Security",
         "icon": "Lock"

packages/app/src/theme/animations.less

@@ -1,5 +1,5 @@
 .fade-transverse-active {
-	transition: all 250ms;
+	transition: all var(--page-transition-duration);
 	height: fit-content;
 	width: 100%;
 }