fix fullscreen player transition

src/renderer/features/player/components/full-screen-player.tsx

@@ -566,7 +566,7 @@ const containerVariants: Variants = {
                 ease: 'easeInOut',
             },
             width: '100vw',
-            y: -100,
+            y: 0,
         };
     },
     open: (custom) => {

src/renderer/features/player/components/mobile-fullscreen-player.module.css

@@ -1,5 +1,7 @@
 .container {
-    position: relative;
+    position: absolute;
+    top: 0;
+    left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;

src/renderer/features/player/components/mobile-fullscreen-player.tsx

@@ -320,24 +320,45 @@ const MobilePlayerContainer = memo(
         }
 
         return (
-            <div
+            <motion.div
+                animate="open"
                 className={styles.container}
+                exit="closed"
+                initial="closed"
                 style={{
                     backgroundColor,
                 }}
+                variants={mobileContainerVariants}
             >
                 <BackgroundImage
                     dynamicBackground={dynamicBackground}
                     dynamicIsImage={dynamicIsImage}
                 />
                 {children}
-            </div>
+            </motion.div>
         );
     },
 );
 
 MobilePlayerContainer.displayName = 'MobilePlayerContainer';
 
+const mobileContainerVariants: Variants = {
+    closed: {
+        y: '100%',
+        transition: {
+            duration: 0.5,
+            ease: 'easeInOut',
+        },
+    },
+    open: {
+        y: 0,
+        transition: {
+            duration: 0.5,
+            ease: 'easeInOut',
+        },
+    },
+};
+
 export const MobileFullscreenPlayer = () => {
     const { t } = useTranslation();
     const setFullScreenPlayerStore = useSetFullScreenPlayerStore();