From e5309cbae660bc27364d472fb4e44b674666fb12 Mon Sep 17 00:00:00 2001
From: Gregor Woiwode <gregor.woiwode@co-IT.eu>
Date: Mon, 4 Mar 2024 22:44:04 +0100
Subject: [PATCH] fix(desktop-menu): use transition instead of animated
 keyframes

---
 src/_shell/menu/desktop/desktop-menu.css | 27 +++++++++---------------
 src/_shell/menu/desktop/desktop-menu.tsx |  2 +-
 2 files changed, 11 insertions(+), 18 deletions(-)

diff --git a/src/_shell/menu/desktop/desktop-menu.css b/src/_shell/menu/desktop/desktop-menu.css
index f83e906f..7f424d79 100644
--- a/src/_shell/menu/desktop/desktop-menu.css
+++ b/src/_shell/menu/desktop/desktop-menu.css
@@ -1,25 +1,18 @@
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
+.desktop-menu-opacity-transition {
+  transition:
+    opacity 0.5s,
+    display 0.5s,
+    overlay 0.5s;
+
+  transition-behavior: allow-discrete;
 
-@keyframes fadeOut {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+  opacity: 0;
 }
 
 .popover-showing {
-  animation: fadeIn both 500ms ease;
+  opacity: 1;
 }
 
 .popover-closing {
-  animation: fadeOut both 500ms ease;
+  opacity: 0;
 }
diff --git a/src/_shell/menu/desktop/desktop-menu.tsx b/src/_shell/menu/desktop/desktop-menu.tsx
index 330b7139..e0dfa8cc 100644
--- a/src/_shell/menu/desktop/desktop-menu.tsx
+++ b/src/_shell/menu/desktop/desktop-menu.tsx
@@ -97,7 +97,7 @@ export const MenuPopoverLink = component$<MenuPopoverLinkProps>(
           onToggle$={event => {
             isOpenedSig.value = event.newState === 'open';
           }}
-          class='listbox container w-full'
+          class='listbox desktop-menu-opacity-transition container w-full'
         >
           <div class='flex justify-between'>
             <ul class='flex basis-10/12 gap-10 p-10'>