feat(popover): initial animations, works for poly only currently

Author: thejackshelton

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

@@ -1,7 +1,21 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import { Popover, PopoverTrigger } from '@qwik-ui/headless';
 
 export default component$(() => {
+  useStyles$(`
+    .my-transition {
+      transition: 300ms opacity ease;
+    }
+
+    .my-transition.popover-showing {
+      opacity: 1;
+    }
+
+    .my-transition.popover-closing {
+      opacity: 0;
+    }
+  `);
+
   return (
     <>
       <PopoverTrigger
@@ -12,7 +26,7 @@ export default component$(() => {
       </PopoverTrigger>
       <Popover
         id="hero-id"
-        class="shadow-dark-medium rounded-md border-2 border-slate-300 bg-slate-800 px-3 py-1"
+        class="shadow-dark-medium my-transition rounded-md border-2 border-slate-300 bg-slate-800 px-3 py-1 opacity-0"
       >
         My Hero!
       </Popover>

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

@@ -1,7 +1,31 @@
-import { component$ } from '@builder.io/qwik';
+import { component$, useStyles$ } from '@builder.io/qwik';
 import { Popover, PopoverTrigger } from '@qwik-ui/headless';
 
 export default component$(() => {
+  useStyles$(`
+  .my-animation.popover-showing {
+    animation: popoverFadeIn 300ms ease;
+  }
+
+  .my-animation.popover-closing {
+    animation: popoverFadeOut 300ms ease;
+  }
+
+    @keyframes popoverFadeIn
+    from {
+      opacity: 0;
+    } to {
+      opacity: 1;
+    }
+    
+    @keyframes popoverFadeOut
+    from {
+      opacity: 1;
+    } to {
+      opacity: 0;
+    }
+  `);
+
   return (
     <>
       <PopoverTrigger