fix(popover): beautiful transition

Author: thejackshelton

apps/website/src/routes/docs/headless/popover/examples/hero.tsx

@@ -3,23 +3,19 @@ import { Popover, PopoverTrigger } from '@qwik-ui/headless';
 
 export default component$(() => {
   useStyles$(`
-    .my-transition {
-      transition: opacity 0.5s, display 0.5s allow-discrete, overlay 0.5s allow-discrete;
-    }
+  .my-transition {
+    transition: opacity 0.5s, display 0.5s, overlay 0.5s;
+    transition-behavior: allow-discrete;
+    opacity: 0;
+  }
 
-    @supports not selector(:popover-open) {
-      .my-transition {
-        transition: opacity 0.5s;
-      }
-    }
+  .my-transition.popover-showing {
+    opacity: 1;
+  }
 
-    .my-transition.popover-showing {
-      opacity: 1;
-    }
-
-    .my-transition.popover-closing {
-      opacity: 0;
-    }
+  .my-transition.popover-closing {
+    opacity: 0;
+  }
   `);
 
   return (

packages/kit-headless/src/components/popover/popover-impl.tsx

@@ -104,7 +104,7 @@ export const PopoverImpl = component$<PopoverImplProps>((props) => {
 
         setTimeout(() => {
           if (e.newState === 'open' && popoverRef.value) {
-            supportShowAnimation(popoverRef.value, isPolyfillSig.value);
+            supportShowAnimation(popoverRef.value);
           }
         }, 5);
 

packages/kit-headless/src/components/popover/popover.css

@@ -10,10 +10,6 @@
   display: block !important;
 }
 
-/* .popover-closing[popover]:not(:popover-open):not(dialog[open]) {
-  display: block;
-} */
-
 /* Popover Presets: TODO figure out specificity to make this easier for user to override */
 .listbox {
   --listbox-margin: unset;

packages/kit-headless/src/components/popover/utils.ts

@@ -1,14 +1,9 @@
 /**
  * Adds CSS-Class to support popover-opening-animation
  */
-export function supportShowAnimation(popover: HTMLElement, isPolyfill: boolean) {
+export function supportShowAnimation(popover: HTMLElement) {
   popover.classList.remove('popover-closing');
   popover.classList.add('popover-showing');
-
-  if (isPolyfill) {
-    /* to support tooltips that enter quickly */
-    popover.classList.add(':popover-open');
-  }
 }
 
 /**