From 85407cfd3e8c3b586b5bcda01ddebb70d508b015 Mon Sep 17 00:00:00 2001
From: IEduStu <125146135+IEduStu@users.noreply.github.com>
Date: Sat, 20 Apr 2024 01:40:22 +0000
Subject: [PATCH] fix: make screen switching animation feel smoother

---
 src/common/animations.less            | 38 +++++++++++++++++++++++++--
 src/routes/MetaDetails/MetaDetails.js |  2 +-
 2 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/src/common/animations.less b/src/common/animations.less
index 6ca879343..c7a30d2fb 100644
--- a/src/common/animations.less
+++ b/src/common/animations.less
@@ -6,13 +6,29 @@
     }
 
     animation-timing-function: ease-in-out;
-    animation-duration: 100ms;
+    animation-duration: 350ms;
+
+    @media (prefers-reduced-motion) {
+        :local {
+            animation-name: fade-in-no-motion;
+        }
+    }
 }
 
 @keyframes fade-in {
     0% {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+
+    40% {
+        opacity: 0;
+        transform: translateY(4px);
+    }
+
+    70% {
         opacity: 0.6;
-        transform: translateY(0.2vh);
+        transform: translateY(2px);
     }
 
     100% {
@@ -51,4 +67,22 @@
 
 .slide-left-exit {
     transform: translateX(100%);
+}
+
+@keyframes fade-in-no-motion {
+    0% {
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0;
+    }
+
+    70% {
+        opacity: 0.6;
+    }
+
+    100% {
+        opacity: 1;
+    }
 }
\ No newline at end of file
diff --git a/src/routes/MetaDetails/MetaDetails.js b/src/routes/MetaDetails/MetaDetails.js
index 24c904cfd..ded61d5dc 100644
--- a/src/routes/MetaDetails/MetaDetails.js
+++ b/src/routes/MetaDetails/MetaDetails.js
@@ -143,7 +143,7 @@ const MetaDetails = ({ urlParams, queryParams }) => {
                                     :
                                     <React.Fragment>
                                         <MetaPreview
-                                            className={classnames(styles['meta-preview'], 'animation-fade-in')}
+                                            className={classnames(styles['meta-preview'])}
                                             name={metaDetails.metaItem.content.content.name}
                                             logo={metaDetails.metaItem.content.content.logo}
                                             runtime={metaDetails.metaItem.content.content.runtime}